CSS3 animation stay at end state for 3 seconds - css

When doing CSS3 animation, is it possible to stay at the end of the animation for a few seconds and then go back to the original state?
I know you can make the CSS3 animation end on the last frame, or go back to the first frame, but I want to to pause at the last frame for a few seconds then go back to the beginning.
Thank you.

Sure. You'll have to do some math, though, because keyframe stops are measured in percentage of total animation. Let's say your total animation should last 12 seconds -- that means your animation should be unmoving for the last 25% of the total animation time. I'll modify an example from W3schools to demonstrate this.
div.animated {
-webkit-animation: with_delay 12s linear 0s infinite; /* Chrome, Safari, Opera */
animation: with_delay 12s linear 0s infinite; /* Standard syntax */
}
/* Chrome, Safari, Opera */
#-webkit-keyframes with_delay {
0% {background: red;}
75% {background: green;}
100% {background: green;}
}
/* Standard syntax */
#keyframes with_delay {
0% {background: red;}
75% {background: green;}
100% {background: green;}
}
Here is a live demo.
Note that if you don't mind the delay being at the beginning of the animation instead of the end, it's even easier. Simply specify animation-delay or transition-delay depending on which animation technique you already have implemented.

I believe you'll need a little Javascript to make it work. You can detect the end of the animation via Javascript, run a timer, and when the timer completes you can reset and restart the animation.
Here's some references:
CSS Animation Callback
Restart CSS Animation

Related

Gradual transition of an interrupted CSS keyframes :hover animation

My animation uses keyframes, starts on hover and has a long duration.
When I move the mouse out while the animation is still running it stops instantly.
I need the interrupted animation returns to it's original values gradually. (Like 'transform' does).
#keyframes KF_Problem { 100% {transform:scale(2);} }
.Problem:hover { animation:KF_Problem 3s; }
.Problem { transform:scale(1); transition:3s;}
.All_OK:hover { transform:scale(2); transition:3s;}
.All_OK { transform:scale(1); transition:3s;}
1) How can I do that?
2) Why does Firefox "do the work" automatically and all other browsers don't?
Just try the code in http://www.w3schools.com/css/tryit.asp?filename=trycss_default with Firefox and with all other modern browsers to see the difference...

CSS rotate animation doesn't start properly in Safari

I'm using SASS so my CSS syntax looks weird, but anyway, the problem is, that my rotate animation starts well on chrome and firefox, but works only partially on Safari. To be specific, rotateY, scale, skew work normally, but rotate and translateX don't. What is more importat, after I go to another tab and then go back in Safari - suddenly it works as expected.
This is the animation in Safari (before switching tabs):
Safari
Instead of that:
Chrome
Basically, all images appear in the center, and only scale and rotateY animation works, but translate and rotate transitions don't.
To keep it simple this is only the part of the code I use for Safari:
#mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
#at-root (without: media) {
#-webkit-keyframes myOrbit_#{$name} {
from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
}
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}
I've noticed that when I defined the animation with
-webkit-animation-play-state: paused;
then the "satellites" were positioned properly. So the solution was to start the animation with time offset. In my case this helped:
-webkit-animation-delay: 5ms;
One tricky thing was that I had to put it after other -moz- -o- and "regular" animation properties, otherwise is didn't work, like if it was overwritten.

Change color for some seconds using only CSS

Is it possible to change the color of a div on hover for X seconds, then return to its original color using only CSS?
I do not want any fade ins or outs between the color. For example, if I want to change the color of the div to yellow for 1 second on hover, it must remain yellow for 1 second, then immediately return to the original color.
This (http://jsfiddle.net/hZ49y/1/) is what I have so far. It works as I described above, but I feel that this way of using animation is not intuitive and hard to understand. Should I stick to using JavaScript for this purpose? What are some alternatives?
It is possible, but requires some math!
Here is the Fiddle
You must use another parameter of animation: animation-iteration-count as 1
div:hover {
animation: myfirst 2s 1;
}
#keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
75% {background:yellow;}
100% {background:red;}
}
This is going to perform a 4s animation with the following "key-frames":
0s > red
1s > yellow (stays 2 seconds here)
3s > yellow
4s > red
The only problem is that the animation stops on mouse out. But you can use javascript to activate the animation (by toggle a class), so the animation doesn't stops on mouse out.
Update:
Here is a Fiddle with js to control css animation.
CSS animations don't explicitly allow instantaneous, non-transitioning changes from frame-to-frame, but you can achieve the effect in practice by setting keyframes so close to each other that it's practically impossible for an intervening frame to come in (forked jsFiddle):
#keyframes myfirst
{
0% {background:yellow;}
99.999% {background:yellow;}
100% {background:red;}
}
I got this with animation. It works exactly as you asked, the only problem is that after page load the box is yellow for a second.
http://jsfiddle.net/4TcMP/1/

Text-shadow keyframe-anim looking smooth in firefox but jumpy in webkit-browsers - why?

yesterday i tried to animate text-shadows using keyframe animations.
the css looked something like this...
.sometxt{
-webkit-animation:shadow 5s linear 0s infinite alternate;
animation:shadow 5s linear 0s infinite alternate;
}
#-webkit-keyframes shadow {
0%{text-shadow:0px 0px green;}
100%{text-shadow:5px 0px green;}
}
#keyframes shadow {
0%{text-shadow:0px 0px green;}
100%{text-shadow:5px 0px green;}
}
(JS Fiddle: http://jsfiddle.net/3yB8q/1/)
I kept previewing the page in firefox, where the animation looks great and runs fluid. looked at it chrome however, the whole thing looks like a stop-animation. taking the code above for example, every second the shadow JUMPS one pixel aside. while in firefox it is drawn as one smooth move.
How can I prevent this happening?

animating elements sequentially in pure css3 on loop

I'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any ideas how to make the animation loop infinitely?
I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.
This was the similar [question] (https://stackoverflow.com/a/8294491/340888)
Was using this:
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}
.myClass img { float: left; margin: 20px;
-webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }
Edit
Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.
So #Sonu Joshi's answer is incorrect.
You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.
In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.
So you might want something like this: -webkit-animation: Fadein 4s infinite linear.
But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
21.25% {opacity:1; -webkit-transform:scale(1.05);}
25% {-webkit-transform:scale(1); }
}
Fiddle example

Resources