CSS rotation animation stop in place - css

I have the class .orbit that triggers the orbit animation. I remove the class to stop the rotation. That resets the element to its original position.
Is there a way to stop the rotation animation in its tracks, leaving the element where it is?
Currently getting the position and setting it to that, but it's not perfect.
https://jsfiddle.net/f4hnz2va/2/
#errordot{
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:red;
border-radius:50%;
font-size:40px;
}
#errorsun{
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
}
.orbit {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
}
#-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
#-moz-keyframes orbit {
from { -moz-transform:rotate(0deg) }
to { -moz-transform:rotate(360deg) }
}

What you need is not "stop" the orbit animation, but "pause" it, using CSS3 animation-play-state property. If you want to pause it forever and not resume again, a mark variable (such as "hasPaused") can be applied.
Sample jsfiddle can be found at:
https://jsfiddle.net/cshao/1kb8cm7j/1/

Related

perform an animation from the current position of the element at 10px on the right

I'm new to this topic of animations. Basically I want to move a div .son in your hover property. I would like this animation to start from its current position at 10px on the right. I am normally able to perform this animation by defining an initial position for "left" and an ending for "left" but in this case I want it to take the initial position in which it is and thus move 10px to the right.
<div class="father">
<div class="son">
</div>
</div>
.father{
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.son{
position:absolute;
width:100px;
height:100px;
border:1px solid red;
}
.son:hover {
-webkit-transition: all 0.5s ease;
-webkit-animation: fadein_1 0.2s ease-in;
}
#-webkit-keyframes fadein_1 {
from { opacity: 1;left:auto;z-index:2; }
to { opacity: 0; left:10px;z-index:3; }
}
this is my code:
https://jsfiddle.net/ze9vdLa3/it?
thanks
If you can use jQuery, check this :
https://jsfiddle.net/95agyjuo/
jQuery('.son').mouseover(function(){
jQuery(this).animate({
left : "+=10"
})
})
You can accomplish the desired animation using the CSS translateX() function. As #Joe Koker stated, this is more performant than animating the left property.
#-webkit-keyframes fadein_1 {
from {
opacity: 1;
transform: translateX(0px); //start from initial position
z-index:2;
}
to {
opacity: 0;
transform: translateX(10px); //move 10px
z-index:3;
}
}
Your question is a bit vague, but if what you want is to animate an element to the right, it's easy. You almost had it.
Some things:
It's not possible to animate from auto, so I had to change left:auto -> left: 0; (from { opacity: 1;left:0;z-index:2; })
-webkit- isn't necessary
It's not possible to animate z-index either
Here is a working fiddle: https://jsfiddle.net/oqdn6xLg/1/
Though for this use case, I would recommend using the transition property instead, as its simpler. Check out the difference here: https://jsfiddle.net/L04xhgpr/
Note that transform: translateX() performs better, as others have already said :)

Seamless SVG Animation

I am trying to make a seamless animation so teh svg just continues to act like rain in a continous loop. The problem is the animation resets and you can tell. I would like to do this with CSS3 animations. Is the possible?
Full code is in codepen below
#sprinkles { position:absolute; height:100%; width:100%; }
#sprinkles .sprinkle { animation:rainSprinkles .85s linear infinite }
#sprinkles .sprinkle.white { fill:$white; }
#sprinkles .sprinkle.blue { fill:$blue; }
#sprinkles .sprinkle.yellow { fill:$yellow; }
#sprinkles .sprinkle.pink { fill:$hot-pink; }
#keyframes rainSprinkles {
0% {
transform: translateY(-100%);
}
100% {
visibility: hidden;
transform: translateY(1000%);
}
}
Codepen Below:
http://codepen.io/Jesders88/pen/bBYQom
The simplest way is to make your sprinkles be taller than the screen. Now when you move them down more come onto the screen.
Here's a demo.
I've made one change from your example. Instead of having four identical squares of sprinkles, I've taken just one of the four and turned it into a pattern That way the SVG repeats it for you and you can fill any area you want with a continuous pattern of sprinkles.
Then I have made a rectangle that is as wide as the screen and has a height equal to (svgHeight + patternHeight). I start it at -patternHeight off the top of the screen, then animate it down the distance of one patternHeight (487).
#rainRect {
animation: rainSprinkles 2s linear infinite;
}
#keyframes rainSprinkles {
from {
transform: translateY(0px);
}
to {
transform: translateY(487px);
}
}
We move it one patternHeight exactly so that it appears continuous when it jumps back up again to start another loop of the animation.

How to disable CSS3 transitions when zooming?

When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.
Is there a way to use these transitions, but prevent the browser from using them only when zooming?
EDIT:
Sample HTML:
<div></div>
Sample CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
Code also available on jsFiddle.
I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.
It can't handle zooming initiated by using the menu, but its better than nothing.
HTML
<div></div>
CSS:
div {
background:red;
height:200px;
width:200px;
-moz-transition:1s;
-webkit-transition:1s;
transition:1s;
}
div:hover {
height:300px;
width:300px;
}
.zooming {
-moz-transition:0s;
-webkit-transition:0s;
transition:0s;
}
jQuery:
$(document)
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }})
.keyup(function(e) { $('div').removeClass('zooming'); });
Updated jsFiddle. Only tested in Chrome so far.
Try this solution:
http://jsfiddle.net/995zE/
It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.
This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.
HTML:
<button id="decrease_width">- width</button>
<button id="increase_width">+ width</button>
<div id="test"></div>
CSS:
div#test
{
width: 100px;
height: 100px;
border: 1px solid red;
}
div#test.transition
{
transition: width 2s ease;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
}
JavaScript:
var transition_class = 'transition';
var $test = jQuery('#test');
function transition_test(width) {
$test.addClass(transition_class).css('width', $test.width() + width);
}
jQuery("#decrease_width").click(function () {
transition_test(-50);
});
jQuery("#increase_width").click(function () {
transition_test(50);
});
jQuery(window).resize(function () {
$test.removeClass(transition_class);
});

CSS Flipping Cube

I made some expriment with CSS3. I wanted to build a Flipping Cube with only 2 DIV.Like this:
http://cssdeck.com/labs/css3-flipping-cube
(I dont like this solution because the div must always be centered)
So I have tried to find my own solution.
My HTML structure looks like this:
<div class="outer">
<div class="face face1">Click here !</div>
<div class="face face2"></div>
</div>
My CSS file looks like this:
.outer { margin-left:52px; position:relative; width:400px; perspective:500px; }
.face { width:100%; height:50px; padding:0 10px; background-color:#E5E5E5; position:absolute; }
.face.face1 { height:50px; background-color:#E5E5E5; transform:rotateX(0deg); transform-origin:0 0 0; z-index:1; top:0; }
.face.face2 { height:50px; background-color:#007CC1; transform:rotateX(-90deg); transform-origin:0 50px 0; z-index:3; top:0; }
.face.face1.start { transform:rotateX(90deg); transition:transform 1s ease-out; }
.face.face2.start { transform:rotateX(0deg); transition:transform 1s ease-out; }
When I click on the face1 then javascript adds the class start to the divs for are the animation.
$(function(){
$('.outer').on('click', function(){
$('.face1').addClass('start');
$('.face2').addClass('start');
});
});
My solution looks currently not good. Do you have any tips or idea for me. You can see the whole code here:
http://jsfiddle.net/dAXRX/3/
(I didn't use the -webkit prefix. It currently only works with Firefox)

CSS transition doesn't work in Firefox when position is changed

I've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.
jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/
Is there any solution to make it work in FF?
EDIT
It's fixed in Firefox 34
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
CSS
#container {
position:fixed; left:100px; top:100px;
}
#container.some_state_position {
position:absolute;
}
.box {
width:100px; height:100px;
background:blue;
}
.some_state .box {
background:red; width:50px; height:50px;
}
img, .box {
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-ms-transition:all 1.5s ease;
transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
width:50%;
}
It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.
$("#button2").on({
click: function() {
$("#container").toggleClass("some_state");
setTimeout(function() {
$("#container").toggleClass("some_state_position");
}, 50);
}
});
It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.

Resources