Animation is a CSS property that adds much life to a page. Not only can it create movement on the page, but correct functional uses of animation will create an overall better user experience. Animation can provide visual feedback on user actions. This responsiveness draws deeper connection and attention from the user and invokes an element of visual control for the user. The most obvious benefit of animation is the drawing of visual attention. If something’s moving on a flat page, the user’s eye will focus on the moving element. This utility by animation is used functionally in notifications, when you get a text, a notification will pop up on your screen, when you have mail, the little number on the email app will increase.

Animation is able to change an elements style such as color, shape, height, width, etc. An important rule, at-rule, to remember when using the animation property is to always specify keyframes for animation. @keyframes will determine what styles the animation manipulates at certain times. Using the same animation-name, the given name of the keyframe desired for the selector, you can bind these two values together.

This code example helps illustrate the binding of @keyframes to an element with the matching animation-name:

div{

width: 100%;

height: 100px;

background-color: pink;

animation-name: example1;

animation-duration: 5s; }

@keyframes example1 {

from {background-color: pink;}

to {background-color: purple;}

}

Like many other CSS properties, animation has multiple sub-properties including: animation-name, animation-duration, animation-timing-function, animation-delay, animation-direction, animation-iteration-count, animation-fill-mode, animation-play-state.

As CSS allows shorthand syntax, the shorthand for animation, rather than typing out every sub-property, can be written in this respective order separated by only spaces:

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

Since we have already discussed animation-name, at this point, let’s focus on the following 3 sub-properties: animation-duration, animation-delay, and animation-iteration-count.

Animation-duration defines the time allocation in seconds/milliseconds for an animation to complete. Default duration is set to 0 (s)econds, meaning no animation will occur, so it is important to remember to set a specified animation-duration (i.e. 2s, 3s, 4s). Using keywords “from” and “to,” you can change appearance such as background-color “from” pink, “to” blue.” You can manipulate the same using percentages 0%-100%.

While animation-duration property determines how long the animation will take to fully complete 1 cycle, animation-delay is the time it takes for the animation to start. When you first land on a page, animation-delay can determine the delay of animations on the page whether it be immediately or delayed 5 seconds. This property can also determine how long of a delay in between animation cycles.  A delayed animation might look like:

animation-delay: 5s;

Using a negative value, animation-delay: -3s; will start the animation as if it were already playing for -3 seconds.

Finally, animation-iteration-count determines how many times the animation will be played. animation-iteration-count: 5; will play an animation 5 times before stopping. If you don’t want the animation to ever stop, you can set the iteration-count: infinite, and the animation will never stop.

Here’s a CodePen example to visually demonstrate the 3 animation properties discussed:

Furthermore, here is a real world website example, Miki Mottes an illustration, and animation designer site eusing animation properties as well.