I want to run an animation after a pause in a cycle. For EXAMPLE,
#-webkit-keyframes test {
0% { opacity:0; }
50% { opacity:1; }
100%{ opacity:0;}
}
.test {
-webkit-animation:test 5s linear 10s infinite forwards;
}
I want to pause/delay the animation for 10s, then doing the animation for 5s and repeating this cycles.
The above example, only works for the first cycle. How can I induce delay/pause in each cycle for infinite cycling? In other words, I need a 15s cycle but with 5s of animation of FULL keyframe (from 0% to 100%).
NOTE that I do not aim to change the keyframe percentages.
Without javascript what you desire is impossible without changing your current keyframes. You could do the following instead, but that is the only non-javascript fix for a delay each time
#-webkit-keyframes test {
0% { opacity: 0; }
16.66% { opacity: 1; }
33.33% { opacity: 0; }
100% { opacity: 0; }
}
.test {
-webkit-animation:test 15s linear infinite forwards;
}
Demo here
The only other way, like mentioned before, is to use javascript to reset the CSS animation. Helpful article on that here
Related
I'm trying to slow down the time between animations in my cycle.
I've tried increasing the animation time for my keyframes, but that didn't work.
span {
animation: rotateWordsFirst 15s linear infinite 0s;
&:nth-child(2) {
animation-delay: 5s;
}
&:nth-child(3) {
animation-delay: 10s;
}
&:nth-child(4) {
animation-delay: 15s;
}
}
#keyframes rotateWordsFirst {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
I was hoping to keep the text visible for a longer period of time between animations, but everything I've tried seems to throw off my animation cycle.
I've been using this tutorial:
http://www.css3transition.com/rotating-words-css-animations/
I stumbled upon a similar problem when making a semi complex city animation with cars, planes and trains moving all at the same time.
I then came across this article from Chris Coyier:
https://css-tricks.com/css-keyframe-animation-delay-iterations/
here is an animation-delay property, but that won't help us here. That delays the start of the animation, but after it's started it runs continuously.
So, what he suggests, similar to what ChrisW was trying to explain, is to include the delays into your keyframe logic:
EXAMPLE
My original animation lasts 4 seconds, I want it to run infinitely but with a delay of 1s at end. This means I have to add the delay to the total animation time, in this case, 4s + 1s = 5s. Apply the following changes:
.your-element {
animation: name-of-your-animation 5s infinite;
}
Now, for the keyframes, let us assume we had something like this:
#keyframes name-of-your-animation {
0% {
//do something
}
25% {
// do something
}
50% {
//do something
}
75% {
//do something
}
100% {
// do something
}
}
We need to factor in the 1s delay at the end, so our animation must take place in 4s out of 5s, in other words, 4/5th's of the animation or 80% of the 100%:
#keyframes name-of-your-animation {
0% {
//do something
}
50% {
// do something
opacity:0.5;
}
/* Finish changes by here, as an example, let's think of moving opacity from 0 to 1, gradually or not */
79% {
opacity:1;
}
/* Between 80% and 100%, nothing changes, so the 'end state' is repeated */
80%, 100% {
// do something
opacity:1;
}
}
Give it a try and let us know if you need additional help.
Cheers
G
Current I am using some animations with my sliding ionic list such as sliding in from left to right and content from fading in as per this tutorial. https://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/
#-webkit-keyframes animateInPrimary {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
#-webkit-keyframes animateInSecondary{
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-in-primary {
-webkit-animation: animateInPrimary;
animation: animateInPrimary;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
.animate-in-secondary {
-webkit-animation: animateInSecondary ease-in 1;
animation: animateInSecondary ease-in 1;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
Now I would want the ion-items to slide one after the other. I think I have to use the css property -webkit-animation-delay. But i am not sure where to insert it. Hope someone can help. Thanks,
Ashley
If you wanted to do this with CSS animations then what you would need to do is add an incremental class to each list item and then stagger your animations accordingly as demonstrated here: CSS Animations with delay for each child element
The easier way to do this is with the built in stagger function of the animations module - take a look at this article: https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#
I have an animation that has an infinite iterations count:
.spinner {
animation: spinnerAnimation 2s linear infinite;
}
What I want is to make the animation finish the current animation cycle and stop it on a button click (not really on a button click, but this is to make things easier to understand):
$("button").click(function() {
$(".spinner").addClass("stop");
})
This will add a stop class to the spinner:
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
It doesn't work really smooth, but I don't care about smoothness much in this case:
http://codepen.io/Deka87/pen/OXZvdm
The only problem is that this won't stop the animation in IE edge, i.e. things don't work in IE (versions that support animations). Any ideas?
PS: animation-play-state: pause; is not what I need, because this won't make the animation finish the current animation cycle, but pause it in its current position instead.
PSS: I am really looking for a CSS only solution, i.e. make it work inside .spinner.stop{}.
You had a problem with the name of your keyframe name - spinnerAnimation vs preloaderAnimation
The only way I was able to set IE to stop the animation was to set animation: none; inside the .stop class:
$("button").click(function() {
$(".spinner").addClass("stop");
})
.spinner {
width: 30px; height: 30px;
background: green;
animation: spinnerAnimation 2s linear infinite;
}
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation: none;
}
button {
margin-top: 20px;
}
#-webkit-keyframes spinnerAnimation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinnerAnimation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner"></div>
<button>Stop spinner</button>
In my web application, I'd like to display a message to the user after signing in or out that fades after a few seconds. I'd like to accomplish this animation with CSS.
Here is my stylesheet:
#keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.flash-message {
animation: fadeout 1s 3s;
}
This almost works: after a three-second delay, it begins to fade, then it takes one second to complete the animation. The problem is after the animation is complete the message reappears.
This is what I have to do to get the message to stay hidden:
#keyframes fadeout {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.flash-message {
animation: fadeout 4s;
opacity: 0;
}
It seems like there should be an easier way to get the first version to work. Am I missing something or do I have to have opacity: 0 on the class as in the second version?
Use animation-fill-mode and set it to forwards:
#keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.flash-message {
animation: fadeout 1s 3s forwards;
}
As Jason's answer explains, animation-fill-mode is the way to go. It defines if and how CSS properties are applied outside of the animation.
Its default setting is none, which applies the properties only while the animation is executing.
Setting it to forwards permanently applies the properties from the last keyframe value.
See the list of values for more info.
trying to flash three elements in a row with css3 animations. i've got it running, but there is a fade for each frame and i'd like to remove it. ideally each element stays visible for 1s, then hides immediately.
i've tried setting the animation with frames at 0% and 99% for opacity:1 and 100% for opacity: 0 but still no luck.
i hope theres a way to remove the fade!
webkit js fiddle
CSS:
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
.frame:nth-of-type(2) {
-webkit-animation-delay: 1s;
}
.frame:nth-of-type(3) {
-webkit-animation-delay: 2s;
}
#-webkit-keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Just define your animation so that it keeps one state as long as possible and then switches to the other one as fast as possible. Like this:
#-webkit-keyframes flash {
0% { opacity: 1; }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
Use proper animation-timing-function:
http://jsfiddle.net/rfGDD/1/ (WebKit only)
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal; /* not "linear" */
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function:steps(3, end);
}
MDN document on fill-mode
MDN document on direction
MDN document on steps() timing function
Edit:
Oops, just realized the logical flaw.
Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)
In addition to the above change, change the flash animation to following:
#-webkit-keyframes flash {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.
You may keep the opacity for the longest period and change it very quickly.
Try this:
.blinkMe {
animation: blink 1s linear infinite;
}
#keyframes blink {
0%,50% {
opacity: 0;
}
51%,100% {
opacity: 1;
}
}