I'm calling an animation like this:
document.getElementById('banner').className = "changeColorToIndigo";
Then I've got the CSS property:
div.changeColorToIndigo {
animation-duration: 1s;
animation-name: changeColorToIndigo;
animation-fill-mode: forwards;
}
And the keyframes animation:
#keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
But the animation goes back to it's initial state after the animation has completed, why is that? I've set the fill mode to forwards and specified the to (100%) property.
I've put your code in a Fiddle, and it works fine for me
HTML
<div id="banner"></div>
CSS
div{
height: 40px;
width: 40px;
background-color: #00BBD2;
}
div.changeColorToIndigo {
animation-name: changeColorToIndigo;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
jQuery
$(document).ready(function(){
$('#banner').addClass('changeColorToIndigo');
})
Related
Hi I am trying to implement css animation, i have implemented #keyframes
but my animation is not applied to my div.
my keyframe is
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Please tell me where i am wrong.
You have done everything right but you haven't created the class which will implement animation
Create two css class as follows
.fadeIn {
animation-name: fadeIn;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
animation-name is the name of your keyframes in your example i.e. fadeIn.
Now use those two class in your div where ever you want to implement.
Hope this helps.
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {top: 0px;opacity:0;}
100% {top: 100px;opacity:1;}
}
</style>
<div></div>
I'm trying to implement this simple animation for a rock-paper-scissors game I'm developing:
http://jsfiddle.net/franciov/kbngz27s/1/
#keyframes arm-out {
from {
left: 0em;
}
to {
left: 5em;
}
}
.player > .arm.out {
animation-name: arm-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Basically, I want the player to:
pull back his arm when the game loads (arm-in animation)
show his arm when the 'Play' button is clicked (arm-out animation) Note: I would like the player to show the arm after a while, at the moment this is implemented with a window.setTimeout but I would like to use the animation-delay property
show the hand shape after a delay (reveal animation, in JSFiddle the shape is always 'scissors')
The animation-delay for the point (3) works well:
#keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hand.reveal {
animation-name: reveal;
animation-delay: 0.5s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
but when I try to add a animation-delay property for the point (2), things does not work properly anymore, as you can try on the next JSFiddle:
http://jsfiddle.net/franciov/kbngz27s/2/
.player > .arm.out {
animation-name: arm-out;
animation-delay: 0.8s; /* This is not working properly */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Any ideas?
I tried the JSFiddles above on Chrome 45.0.2454.101 and Firefox 43.0a2.
You simply have to add left: 0; to .arm.out, because at the moment you click the button, it removes the in class and you have left: 5em; in your arm class.
Set the left position of "out arm" to zero then let the animation do the job.
.player > .arm.out {
left: 0; /* Add this one. */
animation-name: arm-out;
animation-delay: 0.8s; /* This is working for me (Chrome 45) */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Fiddle : http://jsfiddle.net/kbngz27s/3/
(Added some time to .hand.reveal so it doesn't appear before the arm). Strangely it sometimes fails as you say, but not every time...
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'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>
Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example
Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
I have multiple divs with animations, created in CSS, on my page. When the last div with animation is finished animating I wish to have the whole sequence to start over. My animations all have different delay times, and animations. I've tried the "animation: infinite" but what that achieves is the each individual animation will run again immediately after the animation has finshed. I need it start from the beginning after all of the animations have completed.
Anyone know how to achieve this?
Sample CSS
.openDiv {
width: 0px;
height: 513px;
background-image: url("CLS-circle-Ring-faded.png");
animation-name: grow;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
transition-delay: 10s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-webkit-transition-delay: 10s;
}
#-webkit-keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
} /* Standard syntax */#keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
}