I would like to add a continuous fading effect in the background image of my wrapper. I know you can use keyframe animation to make a background image move arround, however, i was wondering if there is a fade effect possible using this technique.
http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
For example:
#-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
Would be in my perfect situation something like...
#-webkit-keyframes fontbulger {
0% {
background: url(image.png, 1);
}
30% {
background: url(image.png, 0.5);
}
100% {
background: url(image.png, 1);
}
...for which 0.5 would be a visibility of 50%. Ofcourse, this suggestion does not work. Any way to accomplish this? I know you can apply transparency to RGB value's, but I would like to apply it to an image.
I am not aware of any way currently to directly affect the opacity of the background image as you seek. Two possible workarounds are:
1. Pure CSS3 way (not well supported yet)
Using a pseudo-element to supply the background-image allowed opacity to be used and keep the whole thing as pure css, but it did not work on webkit (which apparently does not support animation on pseudo-elements), only on the moz extension (I could not test IE10... feedback on that would be helpful). Compare Firefox with Chrome for this fiddle, which used this code:
HTML
<div class="bkgAnimate">Foreground text</div>
CSS
.bkgAnimate {
width: 300px; /*only for demo*/
height: 200px; /*only for demo*/
position: relative;
z-index: 1; /* make a local stacking context */
}
.bkgAnimate:after {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: url(src="your/image/path/file.png") no-repeat;
z-index: -1;
-webkit-animation: fontbulger 3s infinite;
-moz-animation: fontbulger 3s infinite;
-ms-animation: fontbulger 3s infinite;
}
#-webkit-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-moz-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
#-ms-keyframes fontbulger {
0% { opacity: 1; }
30% { opacity: 0.5; }
100% { opacity: 1; }
}
2. Cluttered HMTL solution (more cross browser friendly)
Changing to put an actual img tag in as the background seemed to be the only way to get webkit to behave, as this fiddle shows. But that may not be desirable for you. Code similar to above except:
HTML
<div class="bkgAnimate">Foreground text
<img class="bkg" src="your/image/path/file.png"/>
</div>
CSS change from above
Change the :after selector to .bkgAnimate .bkg and remove the content and background property from that code.
Related
Try to do what should be a basic text animation. I have an H1 with three words. Each one has a span with a class in it. That way each word can animate individually.
The second and third are supposed to fade in, and that works, but the first is supposed to slide up and no matter what settings I create in my CSS, it only fades.
So the H1 looks something like this:
<h1><span class="word-one">Word One</span> <span class="word-two">Word Two</span> <span class="word-three">Word Three</span></h1>
And the CSS looks like this:
.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; }
#keyframes slideIn {
100% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
So why can't I get the text to slide up?
With your code a quick solution can be something like that:
h1 {width: 600px; position: relative;} /* add position so the span will be part of the the header */
h1 span:nth-child(2) {padding-left: 180px;} /* make place for the first word */
.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; position: absolute; } /* added position so the bottom attribute would work */
#keyframes slideIn {
100% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<h1><span class="word-one">Word One</span> <span class="word-two">Word Two</span> <span class="word-three">Word Three</span></h1>
I am not seeing anything in your posted code to try and make it slide up, as the CSS makes it fade in/out. I believe there are some JQuery functions to make an element slide up/down if you would like to look into those though. You can also possibly use the position attribute or even margin to do this in pure CSS. The reason that the current code you have posted isn't working though, is because you have 100% for both entries in #keyframes slideIn. To fix this, simply change the top one to 0% like so:
#keyframes slideIn {
0% {
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
The problem is that you are using <span>.
<span> by default are display: inline which means it wont respect top/bottom margins. You need to use divs and use float: left. Then use padding-top to keep word-one at the bottom and then animate to top by giving padding-top: 0
Here is your solution.
.word-one {
padding-top: 200px;
animation: slideIn 1s ease-in-out forwards;
}
.word-one, .word-two, .word-three {
float: left;
}
#keyframes slideIn {
0% {
opacity: 0;
}
100% {
padding-top: 0;
opacity: 1;
}
}
<h1>
<div class="word-one">Word One</div>
<div class="word-two">Word Two</div>
<div class="word-three">Word Three</div>
</h1>
I have a problem and the answer I found are not precise enough.
I have 2 DIV. A div at left:-100%; and a div at left:100%;
I would like in ONE animation, animate those div to smoothly go from their actual Left, to left:0%;
i tried adding just
.animSlide{
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-name: anim;
}
#keyframes anim {
to {
left: 0%;
}
}
But this brake all steps on animation. I mean, after 0.5s my div go from actual left to 0%;
So, is there a way to say
#keyframes anim {
from{
left:current%;
}
to {
left: 0%;
}
}
Thx for help
EDIT : The ABOVE code should work. So my problem come from another part of the code...
This is what i do basically : https://jsfiddle.net/Crocsx/rwyt400n/
Answer based on the JSFiddle provided in comment by the author.
This is not a very good answer because I only have an hypothesis about the problem, however I have a solution.
The problem, I think, is that the value of left after the animation is "virtual". When you start the second animation (by putting the class "slide_to_right") it look at the real value which is still 100%, even though you see it as 0%, and start the animation from this point (that's why it is not animated from 0%).
Because you are using JS to change the state of the elements, instead of using animations, you can use transitions. It will allow your element to be animated automatically when changing between the 2 states and it is easier to set in this case (less code).
Thanks to this property, all you have to do is set the transition property on your sliding element. And then change its state in JS. In this case you want to alternate between left:100% and left:0%. So the transition property is written like this : transition: left 5s;.
To set the different left values, you can directly change the style in JS. Or have a class prepared in your css and add this class to your element. In this case, 2 classes .left and .right work great.
The transition will take care of the animation.
Here is the code : https://jsfiddle.net/rwyt400n/4/ (I changed the id to classes).
I think this is what you're looking for:
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-100px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-100px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
you can specify a css property value that you want the animation to begin with, and end with. you can also split this keyframe into more than just 0% and 100%.
For ex.
#keyframes dropHeader {
0% {
transform: translateY(-100px);
}
25% {
transform: translateY(-75px);
}
50% {
transform: translateY(-50px);
}
75% {
transform: translateY(-25px);
}
100% {
transform: translateY(0);
}
}
See this fiddle.
HTML:
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS:
.wrapper {
height: 200px;
width: 100px;
margin-left: 100px;
}
.div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
left: -100%;
animation: anim 5s;
}
.div2 {
width: 100px;
height: 100px;
background: black;
position: relative;
left: 100%;
animation: anim 5s;
}
#keyframes anim {
to {
left: 0;
}
}
I have a div in which I animate the content:
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
}
<div id="container">
<div id="content"></div>
</div>
On hover, the content slides into the container div.
When I refresh the page and the page loads, the #content's animDown animation will run, and I'd prefer it to run only after a hover event.
Is there a way to do this pure CSS, or I have to figure something out in JS?
http://jsfiddle.net/d0yhve8y/
I always set preload class to body with animation time value 0 and its working pretty well. I have some back going transitions so I have to remove load animation to them too. I solved this by temporary setting animation time to 0. You can change transitions to match yours.
HTML
... <body class="preload">...
CSS is setting animation to 0s
body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}
JS will remove class after some delay so animations can happen in normal time :)
setTimeout(function(){
document.body.className="";
},500);
Solution 1 - Add down animation on first hover
Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.
This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.
;(function(){
var c = document.getElementById('container');
function addAnim() {
c.classList.add('animated')
// remove the listener, no longer needed
c.removeEventListener('mouseover', addAnim);
};
// listen to mouseover for the container
c.addEventListener('mouseover', addAnim);
})();
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solution 2 - play animation hidden
Another way around this is to initially hide the element, make sure the animation plays while it is hidden, then make it visible. The downside of this is that the timing could be slightly off and it is made visible too early, and also the hover isn't available straight away.
This requires some Javascript which waits for the length of the animation and only then makes #content visible. This means you also need to set the initial opacity to 0 so it doesn't appear on load and also remove the visibility from the keyframes - these aren't doing anything anyway:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById('content').style.visibility = 'visible';
}, 1100);
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
visibility:hidden;
-webkit-animation:animDown 1s ease;
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
#container:hover #content {
-webkit-animation:animUp 1s ease;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes animUp {
0% {
-webkit-transform:translateY(0);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
#-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}
<div id="container">
<div id="content"></div>
</div>
Solution 3 - Use transitions
In your scenario, you can make this CSS only by replacing the keyframes with a transition instead, so it starts with opacity:0 and just the hover has a change in opacity and the transform:
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
<div id="container">
<div id="content"></div>
</div>
Is there a way to do this pure CSS ?
Yes, absolutely : See the fork http://jsfiddle.net/5r32Lsme/2/
There is really no need for JS.
and I'd prefer it to run only after a hover event.
So you need to tell CSS what happens when it is NOT a hover event as well - in your example :
#container:not(:hover) #content {
visibility: hidden;
transition: visibility 0.01s 1s;
}
But there are two things to note:
1) The transition delay above should match your animation duration
2) You can't use the property which you use to hide the animation onLoad in the animation.
If you do need visibility in the animation, hide the animation initially like e.g.
#container:not(:hover) #content {
top: -8000px;
transition: top 0.01s 1s;
}
A sidenote:
It is recommended to put native CSS properties after prefixed ones, so it should be
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
and now there is a native transform
-webkit-transform: translateY(0);
transform: translateY(0);
If you're looking at this after 2019, a better solution is this:
let div = document.querySelector('div')
document.addEventListener('DOMContentLoaded', () => {
// Adding timeout to simulate the loading of the page
setTimeout(() => {
div.classList.remove('prevent-animation')
}, 2000)
document.querySelector('button').addEventListener('click', () => {
if(div.classList.contains('after')) {
div.classList.remove('after')
} else {
div.classList.add('after')
}
})
})
div {
background-color: purple;
height: 150px;
width: 150px;
}
.animated-class {
animation: animationName 2000ms;
}
.animated-class.prevent-animation {
animation-duration: 0ms;
}
.animated-class.after {
animation: animation2 2000ms;
background-color: orange;
}
#keyframes animationName {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: purple;
}
}
#keyframes animation2 {
0% {
background-color: salmon;
}
50% {
background-color: green;
}
100% {
background-color: orange;
}
}
<div class="animated-class prevent-animation"></div>
<button id="btn">Toggle between animations</button>
Having had to solve a similar challenge, a neat CSS-only trick morewry posted already back in 2013 is to create an animation that initially is in a paused play-state on a keyframe hiding the element:
#content {
animation:animDown 1s ease, hasHovered 1ms paused;
animation-fill-mode: forwards; /* for both animations! */
}
#container:hover #content {
animation:animUp 1s ease, hasHovered 1ms;
}
/* hide #content element until #container has been hovered over */
#keyframes hasHovered {
0% { visibility: hidden; } /* property has to be removed */
100% { visibility: visible; } /* from the other animations! */
}
When hovering, the very brief animated transformation is applied and stays in the 100%-keyframe-state even after mouse-leave thanks to the animation-fill-mode.
For how to set animation sub-properties with multiple animations, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values
This is not pure CSS but maybe someone will stumble across this thread as I did:
In React I solved this by setting a temporary class in ComponentDidMount() like so:
componentDidMount = () => {
document.getElementById("myContainer").className =
"myContainer pageload";
};
and then in css:
.myContainer.pageload {
animation: none;
}
.myContainer.pageload * {
animation: none;
}
If you are not familiar the " *" (n.b. the space) above means that it applies to all descendents of the element as well. The space means all descendents and the asterisk is a wildcard operator that refers to all types of elements.
It's always better a solution without relying on javascript.
The ones with CSS mentioned here are ok. The idea of hiding when not on mouse hover is fine for some situations, but I noticed that if I wanted the animation to happen when the mouse moves out of the element, it wouldn't happen because of the :not(:hover) rule.
The solution I came up worked best for me, by adding a animation to the parent element, that only adds opacity at the end with the same duration. Easier shown than explain:
I grabbed the fiddle made by #sebilasse and #9000 and I added the below code there:
https://jsfiddle.net/marcosrego/vqo3sr8z/2/
#container{
animation: animShow 1s forwards;
}
#keyframes animShow {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Rotation animation that (appears) not to run until needed.
The CSS below allows for up and down arrows for showing menu items.
The animation does not appear to run on page load, but it really does.
#keyframes rotateDown {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
#keyframes rotateUp {
from { transform: rotate(180deg); }
to { transform: rotate(0deg); }
}
div.menu input[type='checkbox'] + label.menu::before {
display :inline-block;
content : "▼";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type='checkbox']:checked + label.menu::before {
display : inline-block;
content : "▲";
color : #b78369;
opacity : 0.5;
font-size : 1.2em;
}
div.menu input[type='checkbox'] + label.menu {
display : inline-block;
animation-name : rotateDown;
animation-duration : 1ms;
}
div.menu input[type='checkbox']:checked + label.menu {
display : inline-block;
animation-name : rotateUp;
animation-duration : 1ms;
}
div.menu input[type='checkbox'] + label.menu:hover {
animation-duration : 500ms;
}
div.menu input[type='checkbox']:checked + label.menu:hover {
animation-duration : 500ms;
}
From top to bottom:
Create the rotations. For this there are two... one for the down arrow and one for the up arrow. Two arrows are needed, because, after the rotation, they return to their natural state. So, the down arrow starts up and rotates down, while the up arrow starts down and rotates up.
Create the little arrows. This is a straight forward implementation of ::before
We put the animation on the label. There is nothing special, there, except that the animation duration is 1ms.
The mouse drives the animation speed. When the mouse hovers over the element, the animation-duration is set to enough time to seem smooth.
Working on my site
Building off of Tominator's answer, in React, you can apply it per component like so:
import React, { Component } from 'react'
export default class MyThing extends Component {
constructor(props) {
super(props);
this.state = {
preloadClassName: 'preload'
}
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.preloadClassName !== this.state.preloadClassName;
}
componentDidUpdate() {
this.setState({ preloadClassName: null });
}
render() {
const { preloadClassName } = this.state;
return (
<div className={`animation-class ${preloadClassName}`}>
<p>Hello World!</p>
</div>
)
}
}
and the css class:
.preload * {
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}
I have an animated menu with some cascade opacity animations that are executed when opening the menu, and when hovering each button. It just adds '.colorHigh' class to each icon on the menú every 100 ms.
You can see a live demo HERE (click on the right bottom menu button to execute it).
When opening the menu in almost any browser (Opera, Chrome, FF...), the animation works correctly, but if you open it on IE (IE v11, in this case), it just animates no opacities at all, with the result you can see in this image:
Opacities have been given following pleeease method (filter), and I think animation is correctly spelled, as seen on here:
#-webkit-keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
#-ms-keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
#keyframes color_change { 0% { opacity: 0; filter:alpha(opacity=0); } 50% { opacity: 0.3; filter:alpha(opacity=30); } 100% { opacity: 0.1; filter:alpha(opacity=10); }}
.colorHigh{
-webkit-animation:color_change 0.8s ease-in forwards ;
-ms-animation:color_change 0.8s ease-in forwards ;
animation:color_change 0.8s ease-in forwards ;}
It seems like IE does not apply the opacity on the pseudo element. Try setting opacity:inherit on your pseudo elements like so: .icon-social::before {opacity:inherit;}.
This fixes it. At least in IE11. Can't test IE10 right now.
Interesting behavior. Will keep this in mind myself.
NOTE: In this particular case, an almost perfect opacity emulator for pseudoelements can be done by affecting its color, having in mind color:transparent is a valid color and works properly on IE 11:
example
#-webkit-keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
#-ms-keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
#keyframes color_out { 0% { color: #BABABA; } 100% { color: transparent; }}
I have a div which I need to animate it's opacity from 1 - 0, and THEN hide it, as some of you may know, adding display properties just override transitional values and hide the element straight away, so I'm wondering if there's a way with css to animate it's opacity, and THEN hide it?
Here's what I've tried:
#keyframes infrontAnimation {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 1;
}
50% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
100% {
display: none;
}
}
This doesn't work, it just hides straight away, it also doesn't stay at the 100% value:
Using it like this:
animation: infrontAnimation 1s 2s ease-out;
So my question is, is it possible to hide something, but only after a certain animation is finished?
Rather than setting the height or width of an element, I found a different approach, that to me, isn't as dodgy as forcing the height at 99.9%. Here's what I came up with:
First, Rather than using display to hide & show it, I used visibility, seeing as it's still something that can interrupt our animation and ultimately cause it to fail, I setup our transition properties initially:
Note: I'll keep other prefixes out for this demo:
.item {
transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}
So what we're doing is setting the transition of the visibility attribute to 0, but delaying it by the time it takes to complete the fade out (opacity);
So when we want it to be visible, we add the class of visilble:
.item.visible {
transition-delay: 0s;
visibility: visible;
opacity: 1;
}
So we're setting our delay to 0 here so that we can override the state when it transitions in, obviously we dont' want to delay the visibility, we want to set that straight away and then animate our opacity;
Then when we want to hide it:
.item.hidden {
opacity: 0;
visibility:hidden;
}
Then all this is doing is transitioning our opacity back to 0, and leaving our delay at 0.7 so that it doesn't actually 'dissappear' in the dom until the opacity has finished.
Detailed Working Example
Fist of all, I've created a Fiddle to show what can be done. The red bars represent other content, like text.
Say, if you want to hide it in a way that it first fades, then shrinks, you could use
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
animation: infrontAnimation 1s 2s forwards ease-out;
-webkit-animation: infrontAnimation 1s 2s forwards ease-out;
Note that both #keyframes as #-webkit-keyframesare used.
If you need to hide it without shrinking animation, you might want to use this
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
You need to set animation-fill-mode: with the value forwards so it ends on the last frame of the animation.
See: http://dev.w3.org/csswg/css-animations/#animation-fill-mode