Creating Animations with CSS3 Keyframes

@keyframes allows you to create complex animations by defining styles at specific points, called keyframes, within a CSS animation.
We’ll take a look at what this can actually do later on with practical examples.

Be sure to include vendor prefixes such as -webkit-, -moz-, and -ms- when necessary.

◯ animation-name
Specifies the name of the animation to be defined.
— Example —

animation-name: test1;

◯ animation-duration
Specifies how long one cycle of the animation takes.
— Example —

animation-duration: 6s;

◯ animation-timing-function
Specifies how the animation changes over time.
— Example —

animation-timing-function: ease-in;

◯ animation-delay
Specifies the delay before the animation starts.
— Example —

animation-delay: 3s;

◯ animation-iteration-count
Specifies the number of times the animation repeats.
infinite
Repeats the animation endlessly.
number
Specifies the number of repetitions.

— Example —

animation-iteration-count: 3;

◯ animation-direction
Specifies whether the animation should play in reverse.
normal
Plays the animation normally every time.
reverse
Plays the animation in reverse every time.
alternate
Alternates between normal and reverse playback.
alternate-reverse
Alternates between reverse and normal playback.
— Example —

animation-direction: normal;

◯ animation-play-state
Allows the animation to be paused or resumed.
running
The animation is playing.
paused
The animation is paused.
— Example —

animation-play-state: paused;

◯ animation-fill-mode
Specifies whether styles should be applied before and after the animation runs.
none
The animation styles are not applied before or after execution.
forwards
Keeps the styles applied at the end of the animation.
backwards
Keeps the styles applied at the beginning of the animation.
both
Applies both forwards and backwards behavior.
The styles are applied both before and after the animation runs.
— Example —

animation-fill-mode: forwards;

◯ When using shorthand notation, write it like this:

animation: name duration timing-function delay iteration-count direction fill-mode

It can be difficult to understand just from text alone, right?
So let’s look at an actual example while also learning how animations are triggered.

.move_test is a shorthand version that combines the animation properties explained earlier.
Inside the @keyframes section, you specify CSS styles for the element you want to animate, from 0% (start) to 100% (end of the animation).

.move_test{
animation: test 4s ease-in-out 2s infinite normal both;
-webkit-aanimation: test 4s ease-in-out 2s infinite normal both;
}
@keyframes test {
0% {transform: translateX(-150%); opacity: 0;}
30%{transform: translateX(4%); opacity: 1;}
70%{transform: translateX(4%); color: red; opacity: 1;}
100% {transform: translateX(500%); opacity: 0;}
}
@-webkit-keyframes test {
0% {-webkit-transform: translateX(-150%); opacity: 0;}
30%{-webkit-transform: translateX(4%); opacity: 1;}
70%{-webkit-transform: translateX(4%); color: red; opacity: 1;}
100% {-webkit-transform: translateX(500%); opacity: 0;}
}

What did you think?
Animations that previously had to be created with JavaScript or Flash can now be expressed easily with CSS.
With some creativity, CSS alone can achieve high-quality interactive effects that attract users’ attention.
Since modern browsers such as IE10 and later, Google Chrome, and the latest versions of Firefox fully support these features, be sure to give them a try.