Simple, Elegant, Common CSS Animations

Follow us on LinkedIn for our latest data and tips!

CSS animations provides a simple way to create animations for your webpage that does not require complicated coding or a scripting language such as JavaScript.  While CSS’s animation capabilities are not as extensive as JavaScript, there is still a lot that can be done using CSS. CSS animations allows you to transition the style of an element or group of elements over a period of time. How long this duration is and what styles are used is entirely up to the developer. There are just two basic keys to creating a CSS animation. First the element to be animated and it’s properties need to be defined. Also, the animation sub-properties such as animation name, duration and direction need to be defined inside of the element. After that the @keyframes rule which contains the styling properties and values needs to be defined. The @keyframe name is the same as the name assigned to animation-name inside the element. The pseudo code goes something like this:




        animation-name: my_animation;

        animation-direction: reverse;


@keyframes my_animation{

       from {property:value;}

       to {property:value;}


Alternatively, @keyframes can also be used to assign styles at specific times during the animation sequence such as when the animation has started and is 25% of the way through, 50% of the way through and so on. Below is the pseudo-code.

@keyframes my_animation{

     0% {property:value;}

     25% {property:value;}

     50% {property:value;}

     75% {property:value;}

     100% {property:value;}



There are various sub properties of the animation property that allow you to create cool effects. Listed below are the most commonly used ones.

animation-duration- This allows you to define how long one cycle of your animation is.

animation-delay- This allows you to set your animation on a delay. If you have set the delay to be 1 second, the element that is on delay will start and finish 1 second later than the rest of the elements.

animation-iteration-count– This specifies how many times the animation is played. To play the animation indefinitely set this property to infinite.

animation-direction- An animation can have four possible directions, namely normal, reverse, alternate, and alternate-reverse. In normal mode the animation always re-starts each cycle at the same point and plays forward. In reverse it does the same but backwards. For alternate, the animation plays one cycle forward and one cycle in reverse and keeps alternating between the two. Alternate-reverse is the same thing except it starts backwards.

animation-timing-function- This function has a set of predefined values that sets the speed of the animation. The values are ease, linear, ease-in, ease-out, and ease-in-out. There is also a cubic Bezier function that allows you to specify your own values using cubic-bezier(n,n,n,n).

Shorthand Notation

While it is possible to write out each animation property and value, it is not necessary. Instead of writing

animation-name: my_animation;

animation-duration: 5s;

animation-direction: alternate;

You can simply write:

animation: my_animation 5s alternate;


Copy and paste the code below into this editor in order to follow along with the example. In the days of the week animation, five circles with labels that indicate each work day of the week Monday- Friday are animated. First a div element is created that defines the properties of the five circles and their text labels. The animation property is used to set the name to ‘daysoftheweek’, the duration to five seconds, the iteration-count to be infinite and the direction to be alternate. After that the animation timing function ‘ease’ and a specific delay is assigned to each circle. Then the @keyframes rule is written to define which styles the properties will transition into. As you can see in the code several animations are happening simultaneously. Seven properties are defined which change styles in the ‘from’ block and ‘to’ block. The circles are set to move across the page while changing color and shape. The font-size of the text is set to decrease until it disappears as the circle moves across the page. Also the box-shadow is set to transition from visible to invisible.

<!DOCTYPE html>









div {

   width: 85px;

   height: 85px;


   background-color: orange;

   box-shadow: 15px 10px 5px #888888;

   font-weight: bold;

   font-size: 30px;

   position: relative;

   animation: daysoftheweek 5s infinite alternate;


/*Apply timing function and delay*/

#div1 {animation-timing-function: ease; animation-delay:0.5s}

#div2 {animation-timing-function: ease; animation-delay:1s}

#div3 {animation-timing-function: ease; animation-delay:1.5s}

#div4 {animation-timing-function: ease; animation-delay:2s}

#div5 {animation-timing-function: ease; animation-delay:2.5s}

/* Keyframe */

@keyframes daysoftheweek {

   from {left: 0px; background-color:orange; width:85px; height: 85px;         border-radius:42px; font-size:30px;  box-shadow: 15px 10px 5px #888888;}

   to {left: 300px; background-color:blue; width:50px; height: 50px; boder-     radius:25px; font-size:0px;  box-shadow: 0px 0px 0px #888888;}





<p> Days of the Week Animation </p>

<div id="div1">M</div>

<div id="div2">T</div>

<div id="div3">W</div>

<div id="div4">Th</div>

<div id="div5">F</div>




CSS animations allows you to create simple, quick animations that enhance the quality of your web page and content. With CSS animations, you can add fun, elegance, and vibrancy to your page without having to learn JavaScript or write difficult, hard to debug code. The animations also work well in almost all browsers. Compatibility issues are rare with CSS animations which is not always the case with animations created in other languages.