Is it possible to "restart" a keyframe animation after it's stops with the same animation delay time again?
#keyframes scale {
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.animated-btn {
animation: scale ease-in 1;
animation-fill-mode:forwards;
animation-duration: .6s;
animation-delay: 11.8s;
}
<a href="" class="btn btn__arrow animated-btn">
Aniamted Button
</a>
Unfortunately it's not possible to set a delay before each animation, but you can set a delay inside the animation. Just let the animation do nothing for a while until you reach a certain percentage.
Here's the updated code.
#keyFrames scale {
90% {
transform: scale(1)
}
95% {
transform: scale(1.3)
}
100% {
transform: scale(1);
}
}
.animated-btn {
display: inline-block;
animation: scale ease-in 1;
animation-fill-mode: forwards;
animation-duration: 12.4s;
animation-delay: 0s;
animation-iteration-count: infinite;
/* Or the shorthand:
animation: scale 1.4s 0s infinite ease-in forwards;
*/
}
Yes you just need to use the animation-iteration-count property.
You can set its value to infinite.
Related
This may be a dumb question (haven't done JS/HTML in a bit). I want this animation to be smooth all the way through but for some reason, it is stopping in the middle for a short period of time then resuming. Adding more steps to try and smooth the transition only seems to make is pause for longer. Is there a fix for this?
#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes example {
0% {
transform: translateX(-330px);
}
50% {
transform: scaleX(3);
}
100% {
transform: translateX(330px);
}
}
<body>
<div id="under">
<p> - </p>
</div>
</body>
To keep things moving evenly, you need to define your scaleX values at 0% and 100%. In addition, I changed your timing function from ease-in-out to linear. At 50%, translateX is already at 0 since you defined the start and end values. For consistency, I added the 0 value at 50%.
#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}
#keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}
<div id="under"></div>
I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I have this form on plunker and a struggling with adding a fade animation.
What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to run (fadeInUp for example).
So the view will animate and then the content inside the view will animate, If somebody can help me with this I would really appreciate it.
my current animation is using the following keyframe animation:
#-webkit-keyframes slideOutLeft {
0% {
transform: scaleY(1) scaleX(1);
}
20% {
transform: scaleY(0.01) scaleX(1);
}
40% {
transform: scaleY(0.005) scaleX(0.5);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(0.005) scaleX(0.5);
opacity: 0;
}
}
#-webkit-keyframes slideInRight {
0% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
opacity: 0;
}
50% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
z-index: 1;
opacity: 0;
}
70% {
transform: scaleY(0.005) scaleX(1);
background: rgba(0,188,140,1);
opacity: 1;
}
100% {
transform: scaleY(1) scaleX(1);
}
}
Running on ng.enter and ng.leave
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease;
-moz-animation:slideInRight 2s both ease;
animation:slideInRight 2s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease;
-moz-animation:slideOutLeft 2s both ease;
animation:slideOutLeft 2s both ease;
}
EDIT 1:
I have updated the code here
using:
#form-views.ng-enter * {
-webkit-animation:fadeIn 2s both ease 3s;
-moz-animation:fadeIn 2s both ease 3s;
animation:fadeIn 2s both ease 3s;
}
#form-views.ng-leave * {
-webkit-animation:fadeOut 0.5s both ease;
-moz-animation:fadeOut 0.5s both ease;
animation:fadeOut 0.5s both ease;
}
And this is the animation:
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
The code appears and disappearing at the correct time but doesn't animate the opacity.
I would try adding separate animation for fadeIn/Out and using the css animation delay to trigger one after the other. E.G:
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
-moz-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
-moz-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
}
and i think you know what the fadeIn and fadeOut animations should be.
UPDATE:
Here's a plunker with the code working the way I believe you want it to work. In chrome at least. You'll need to use the correct prefixes/no prefixes to get it working in other browsers.
How do I combine these two animations (translate & buttonFade) so that they both affect the same image ? Both animations work seperatley but not together. Is there a way to combine the two? (I have omitted the -moz- , -o- etc purposefully to make it easier to read, I have tried adding these and it makes no difference)
translate {
-webkit-animation: moveLeft 1s forwards;
}
#-webkit-keyframes moveLeft {
0% {-webkit-transform: translateX(0px)}
100% {-webkit-transform: translateX(100px)}
}
.intro-button{
position:absolute;
top: 350px;
left: 625px;
opacity: 0;
-webkit-animation: buttonFade 3s 1 forwards;
-webkit-animation-delay: 2s;
}
#-webkit-keyframes buttonFade {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
Any help would be much appreciated!
You can list multiple animations by separating them with a comma, as such you can simply call moveLeft from your CSS for .intro-button and remove your CSS for translate (which by the way is not a valid selector).
You'll also want to add a other value for the animation delay, which should be first animation delay + first animation duration (4s)
Demo Fiddle
Change your CSS thusly:
#-webkit-keyframes moveLeft {
0% {
-webkit-transform: translateX(0px)
}
100% {
-webkit-transform: translateX(100px)
}
}
.intro-button {
position:absolute;
top: 350px;
left: 625px;
opacity: 0;
-webkit-animation: buttonFade 3s 1 forwards, moveLeft 1s forwards;
-webkit-animation-delay: 2s, 4s;
}
#-webkit-keyframes buttonFade {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can actually concatenate the animation property further:
-webkit-animation: buttonFade 3s 2s 1 forwards, moveLeft 1s 4s forwards;
Removing the need to set animation duration separately The shorthand foranimation is:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
I'm trying to display an element, wait 1second and then fade out the element using css3 transitions.
Here is what I have:
.el {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
#-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.el {
opacity: 0;
-webkit-animation-duration: 500ms;
-webkit-animation-name: fadeout;
-webkit-animation-delay: 1000ms;
-moz-animation-duration: 500ms;
-moz-animation-name: fadeout;
-moz-animation-delay: 1000ms;
animation-duration: 500ms;
animation-name: fadeout;
animation-delay: 1000ms;
}
I thought animation-delay would be the way to go, but doing it like this, the element appears after 1000ms instead of fading out after 1000ms.
Any idea how to delay the fadeout?
Thanks!
Why not add the extra delay time to your animation duration:
-webkit-animation-duration: 1500ms;
Where ~66%(1000ms) of the time is a delay:
#-webkit-keyframes fadeout
{
0% { opacity: 1; }
66% { opacity: 1; }
100% { opacity: 0; }
}
Note that i used this time as an example. You can calculate the percentage of the delay yourself
jsFiddle
I hope this is what you meant.
Even though there is already a correct answer, let me enumerate what you options are.
You want an element to begin at opacity of 1, and stay like this for a second. Then, you want to fade it away to opacity of 0 during 0.5 s. And you want it to stay at opacity 0 forever.
The problem here is that the initial state and the final state are differents, so the base state of the element can not be both (of course!).
If we make the base state opacity 0, the problem is at the beginning. We can solve it as in nkmol solution. (starting the animation right away. We can also leave the animation only for the 0.5s where the opacity changes, and change the opacity usiong animation-fill-mode: backwards;
Also, you could set the base element to opacity 1. Then the problem is to make the final opacity 0; that can be done set animation-fill-mode: forwards;