I'm having some issues when using a delay with CSS animation.
My desired effect in the example:
The red box starts transparent waits 1 second, then fades in.
This happens in Chrome.
However, the behaviour in IE and Firefox is different:
The box starts visible, waits 1 second, then disappears and fades back in.
Which behaviour is correct? It seems to me that if you're going to delay an animation, it makes sense to wait at the first frame of the animation, not the last frame.
Is there a workaround without Javascript?
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
height: 200px;
width: 200px;
background: red;
-webkit-animation: fadeIn 1s 1s;
animation: fadeIn 1s 1s;
}
<div class="box"></div>
You could use animation-fill-mode to determine how to 'fill' your animation when it ends. You can revert it to before, after, initial, etc... Its not the most intuitive naming convention, but it does allow you to set your animation to start with opacity : 0; and then retain the computed value you want after the animation using animation-fill-mode: forwards;.
MDN has a good explanation for it: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Related
Could someone tell me how to make a div that will make two animations, but the second div should be only when the first is completed?
.CodeMode {
z-index: 1;
position: absolute;
animation: MoveTop 2s, FullScreen 3s;
}
#keyframes MoveTop {
from {top: 90%;}
to {top: 0%;}
}
#keyframes FullScreen {
from {height: 10vh;}
to {height: 100vh;}
}
Example of how I want that to work:
MoveTop --> Waiting until the animation ends --> FullScreen
Add a delay to your second animation, which is the third value after the animation name in the animation property.
Per MDN:
The animation shorthand CSS property applies an animation between
styles. It is a shorthand for animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count,
animation-direction, animation-fill-mode, and animation-play-state.
To apply this in your code:
.CodeMode {
z-index: 1;
position: absolute;
animation: MoveTop 2s, FullScreen 3s linear 2s;
}
I am trying to create animation, where on hover i am changing image from default image to hover image.
I am using CSS3 animation and keyframe properties,
CSS
.fader img {
transition: all 1s;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.fader:hover img:first-child {
animation: toggle 2s infinite alternate 2s;
}
.fader:hover img:last-child {
opacity: 1;
animation: toggle 2s infinite alternate;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="fader">
<img src="http://placehold.it/200x200/000000" />
<img src="http://placehold.it/200x200/FFFFFF" />
</div>
I have created fiddle for the same
This is working fine , I need to do little change.
when one image change to next it leaves impression of the last one.
I am looking for the transition without footprint of last.
As given in fiddle , before black image comes, white image get slowly fade out then black comes, same happen from black to white. I want change without fade out effect.
I have tried
animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out
but that doesn't work,
also i reduced delay time
animation-delay: .5s
but still that doesn't work. any idea ?
I have a relatively simple Fiddle, that I've mucked up with additional #-webkit- and #-moz- duplicates, but it still fails on Firefox.
div.overlay-dialogue {
...
animation: ANIM_NAME 0.5s ease-in-out;
}
#keyframes ANIM_NAME {
0% { transform: rotateY(55deg); opacity: 0; }
100% { transform: rotateY(0deg); opacity: 1; }
}
http://jsfiddle.net/pxpuL6ea/4/
Can anyone see why??
I got answer from another question: Firefox animation not starting on toggle display style
Firefox and Internet Explorer are rightfully running the animation
regardless of the display state
So to work this around, you can set animation to checked state, like this:
input[type=checkbox]:checked ~ div.overlay-dialogue {
display: block;
animation: ANIM_NAME 0.5s ease-in-out;
...
}
Should style changes specified on a pseudo state such as :hover work after a CSS animation has completed running on the element?
EDIT: Perhaps more pertinently, I should ask: why does applying 'forwards' on an animation prevent a more specific style change from overriding?
EDIT 2: Turns out that this is actually a cross browser issue. E.g. Chrome (I was running Version 38.0.2125.111) behaves incorrectly but Firefox handles it as per the specs.
Long story short: According to the specs (as quoted by chrona below) adding !important to the override should render the style. However, at present, only Firefox handles this correctly.
Here is a reduction:
#keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
#-webkit-keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
.box {
animation: go 3s forwards;
-webkit-animation: go 3s forwards;
}
.box:hover {
background: orange!important;
cursor: pointer;
}
<div class="box">Hover states don't work after animation</div>
I am unable to find information relating to this, nothing in the spec either: http://www.w3.org/TR/css3-animations/
Anybody know if a) this should be possible? b) how to make hover states work on an element once the animation ends?
a)
About why does it happen, I can't state for sure. But it obviously is related to the animation-fill-mode property that you're setting to be forwards. That, by definition, sets the visual style of the element to be the last keyframe of the animation:
forwards
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.
MDN's definition is a bit more clear:
forwards
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:
But I don't know why does it not allow the :hover state to override the styles.
b)
Now, about how to make it work, you could remove the forwards property from the animation. In this case, you'd need to reverse the animation, so the original state of the element (when the animation ends, and removes the visual effect), is the color that you want it to be fixed:
#keyframes go {
0% {
background: pink;
}
100% {
background: green;
}
}
#-webkit-keyframes go {
0% {
background: pink;
}
100% {
background: green;
}
}
.box {
animation: go 2s;
-webkit-animation: go 2s;
-webkit-animation-direction: reverse;
animation-direction: reverse;
background: pink;
}
.box:hover {
background: orange;
cursor: pointer;
}
<div class="box">Hover states don't work after animation</div>
Quoted from the CSS Animations Working Draft
CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules.
and a bit further down (Animation Duration):
[…] and an animation that fills forwards will retain the value specified at the 100% keyframe, even if the animation was instantaneous. Also, animation events are still fired.
As you are animating the background it cannot be overriden by default (except for !important rules). If you don't want to use !important you should go by LcSalazar's answer. (Currently only Firefox reacts as described in the specs [6th Nov 2014])
#keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
#-webkit-keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
.box {
animation: go 3s forwards;
-webkit-animation: go 3s forwards;
}
.box:hover {
background: orange !important;
cursor: pointer;
}
<div class="box">Hover states don't work after animation</div>
Actually I don't really understand your question, may be you need the effects like this? http://jsfiddle.net/abruzzi/5td8w6jx/
#keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
#-webkit-keyframes go {
0% {
background: green;
}
100% {
background: pink;
}
}
.box {
animation: go 3s forwards;
-webkit-animation: go 3s forwards;
}
.box:hover {
-webkit-animation: none;
background: orange;
cursor: pointer;
}
However, with these codes, when you mouseout the text, the animation will be replay.
http://jsfiddle.net/nicktheandroid/vX7CV/10/
This is a simple example, but for what I need this for, transition will not work, animation needs to be used.
When hovering the element, the animation smoothly animates the element, when hovering off of the element it snaps back to it's original settings without smoothly animating back.
Is there a way to cause it to animate back to it's settings instead of snapping back like it is?
Animate needs to be used for the :hover event, but when hovering off the element, I could use transition, if this would work, I can't get it to work though.
I have tested you version in Google Chrome and it worked fine for me.
Also added in the Firefox compatibility and that also worked fine for me.
Here is what I have now:
HTML:
<ul>
</li>test</li>
</ul>
CSS:
ul {
background-color:black;
color:white;
width: 100px;
height:100px;
}
#-moz-keyframes flow-down {
0% {
padding-bottom: 0%;
}
100% {
padding-bottom: 30%;
}
}
#-webkit-keyframes flow-down {
0% {
padding-bottom: 0%;
}
100% {
padding-bottom: 30%;
}
}
ul:hover {
-moz-animation-name: flow-down;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation-name: flow-down;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode:forwards;
}
And here is the JSFiddle version just incase:
http://jsfiddle.net/NQ5xk/1/
Hope this helps.
Regards
in firefox, if you have change 'position' or 'z-index' attr during the animation, animation will not run