CSS: Animation
Example: CSS Animation
Here is simple example of CSS animation.
♥
Here is the code:
<span class="myheart">♥</span>
.myheart { animation: mybeat 1s 0s 300; } @keyframes mybeat { 0% { font-size: 2rem; color: darkred; } 50% { font-size: 4rem; color: red; } 100% { font-size: 2rem; color: darkred; } }
The heart is just a Unicode character ♥ (U+2665: BLACK HEART SUIT)
How Does CSS Animation Work?
There are 2 parts to specify a animation.
- Use the
animation
property to specify a animation, set a name, duration, repetition count, etc. - Use the
@keyframes
(called “at-rule”) to specify the CSS for each key frame of the animation.
The animation property
.myheart { animation: mybeat 1s 0s 30; /* name duration delay iteration-count */ }
The CSS property animation
is a shorthand property for:
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-timing-function
animation-direction
@keyframes at-rule
For example, in:
@keyframes mybeat { 0% { font-size: 2rem; color: darkred; } 50% { font-size: 4rem; color: red; } 100% { font-size: 2rem; color: darkred; } }
This specifies the CSS for each key frame of the animation named mybeat
.
The 0% {body}
is the beginning of animation. The 100% {body}
is the end of animation. You can have other percentages. Inside the curly brackets are normal CSS properties and values.
Browser Support
- As of 2014-03-06, CSS animation is supported by {Firefox, Google Chrome, IE10, Opera}.