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;
Related
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 8 months ago.
I have the following css:
.pagination {
opacity: 0;
animation-name: shownum;
animation-duration: 2s;
animation-delay: 1s;
}
#keyframes shownum {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
but when the page loads the buttons fade in like they are supposed to, but then disappear. So how do you stop the animation to not go back to its original state which I believe is happening in this case?
You need to set animation-fill-mode property to forwards.
.fade {
opacity: 0;
animation-name: shownum;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes shownum {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="fade">This div fades!</div>
Once the animation ends, your opacity will once again go to 0 as that is what you have defined in your css.
Simply remove that line and it will work:
.pagination {
animation-name: shownum;
animation-duration: 2s;
animation-delay: 1s;
}
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.
I have written the following CSS and put it element:after to delay the hover effect to close.
transition: .50s all;
transition-delay: 3s;
Now I want the hover effect will be close after 3 even if the cursor is on the element.
In CSS is there any way to do it?
You could use a keyframe animation instead, whilst setting the iteration count to 1:
note
Prefixing will be required.
Demo
div {
transition: all 0.8s;
height: 300px;
width: 300px;
background: tomato;
}
div:hover{
-webkit-animation: 3s linear hoverit;
-webkit-animation-iteration-count: 1;
-moz-animation: 3s linear hoverit;
-moz-animation-iteration-count: 1;
animation: 3s linear hoverit;
animation-iteration-count: 1;
}
#-webkit-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#-moz-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
<div></div>
use animation instead of transition
#keyframes doMagic {
0% {
// initial styles
}
100% {
// hover styles
}
}
.selector {
animatiom: doMagic 3s ease forwards;
animation-delay: 3s; // not sure if u need it
}
using the keyword forwards you tell the animation to stay in its finished state
read more on http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
if you DONT put that . the animation will play to 100% then go to initial state
I am trying to create a delay for an image to load. I have the following, but I really want it to delay loading for 10 seconds, not just fade in. How can I modify this to get a delay before loading?
.image {
animation: fadeinLoad 10s;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />
We need to give the .image class opacity: 0 so it loads hidden. Then, delay the animation:
animation: fadeinLoad 1s 5s forwards;
The second time of 5s specifies a wait to activate time of 5 seconds. The forwards property pauses the animation at 100%.
The shorthand above is the same as this:
animation-name: fadeinLoad;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
Read more on CSS animation over on the MDN.
Example
Count to five :)
.image {
animation: fadeinLoad 1s 5s forwards;
opacity: 0;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<h1>Count to 5!</h1>
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />
You can do this much simpler than keyframe animations.
Change your code to something like this:
#topHeader .image {
transition-delay: 10s;
transition: opacity 1s;
opacity: 0;
}
#topHeader .image.YOUR-FIRING-CLASSNAME-HERE {
opacity: 1;
}
Plus, the days of needing to prefix every CSS3 property are pretty much over. You don't need -o-, -ms-, etc. etc.
Save for keyframes, as those apparently don't have large-scale standardized support just yet.
Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way?
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: linear;
}
You mean like this:
.spin {
width:100px;
height:100px;
background:red;
}
#-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(2520deg);
}
}
.spin.animated {
-webkit-animation-name: spin;
-webkit-animation-duration: 2800ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
}
<div class="spin animated"></div>
Or even better:
.spin {
width:100px;
height:100px;
background:red;
}
.spin:hover {
transform:rotate(2520deg);
transition: transform 3s ease-out;
}
<div class="spin"></div>
In the to, give another animation:
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
animation: ease;
}
}
#keyframes ease {
}
You might need to tackle the iteration count here. It should happen only after the 7 animations. So, I am not sure about that.
You have it pretty much all the way there.
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: ease; /* your timing function is where you tell it how to animate */
}
here is list of all available calls:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
You can do it with a cubic bezier timing function.
Something like
cubic-bezier(0.81, 0.95, 0.84, 0.95)
will give an effect like the one that you are searching. There is a linear animation most of the time, and then it slows down
You can try different values, and set it graphically, here
bezier curve tester