100%

Basic CSS Animation

R Proffitt
by Richard Proffitt
iopan design

Learning CSS animation can seem a little daughnting at first — but really, understanding the basics is really not too much of a challenge. That is what this article is about: the basics of CSS animation. There are also a number of CSS animation libraries out there that don't require any real knowledge of how the code works! Try them out, by all means; but consider coming back here to start to familiarise yourself with how it all fits together.

I'll be showing you two different ways to achieve some basic animations. We'll start with two CSS Properties that work hand-in-glove: animation and @keyframes. The animation property in CSS can be used to animate many other CSS properties such as color, background-color, border, height, or width. Each animation needs to be defined with the @keyframes at-rule. As I said, there are two different ways of getting the same results; the second way utilises the CSS transition property (More on this later). But before we start; lets just examine the browsers that we are hoping shall render our animations error-free. See the browser table below for when each model of browser was first able to manage CSS animations and transitions. Notice that earlier browsers required vendor-prefixes.

Browser Support for CSS Animations & Transitions

Properties

animation

43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

@keyframes

43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

transition

26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

The @keyframes Rule

When you state CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style. You must also set a time as the duration of the animation and you must bind the animation to an HTML element.

This next example binds the "foo" animation to a <div> element. The animation will last for 6 seconds, and it will gradually change the background-color of the <div> element from "blue" to "yellow":

/* The animation code */
@keyframes foo {
    from {background-color: blue;}
    to {background-color: yellow;}
}

/* The element to bind the animation to */
div {
    width: 220px;
    height: 100px;
    background-color: blue;
    animation-name: foo;
    animation-duration: 6s;
}

Example 1a

An Alternative Method: Using Transition

The CSS transition property can be used to achieve exactly the same results as above, it is applied in a similar way. You must set the attributes to the element that you wish to transition, and you must set a time for the transition to take.

Repeating the above example you can transition the <div> element by hovering over it, examine the following code:

/* The element being transitioned */
div {
    width: 220px;
    height: 100px;
    background-color: blue;
    -webkit-transition: background-color 6s;  
    -moz-transition: background-color 6s;  
    -o-transition: background-color 6s;  
    -ms-transition: background-color 6s;  
    transition: background-color 6s;
}
	
/* The transition change */
div:hover {
    background-color: yellow;
}
	

Example 1b

[Hover Over Element to See Animation]

Example 2a

Example 2b

[Hover Over Element to See Animation]

Example 3a

Example 3b

[Hover Over Element to See Animation]

Example 4a

Example 4b

[Hover Over Element to See Animation]

Example 5a

Example 5b

[Hover Over Element to See Animation]


A list of the css animation sub-properties
Animation Sub-Properties

Here we see the list of animation sub-properties. It's important to learn what these are for and what the values represent, before learning the animation property's short-hand syntax (which saves a lot of typing). Also, it still may be necessary for you to use the -webkit- vendor prefix. This should be placed before the regular CSS.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

img

Fusce in augue

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

<div class="logo-footer-cont">
  <a href="index.html">
     <img class="logo-footer" src="images/logo-footer.png" alt="logo">
  </a>
</div>

Pellentesque venenatis tellus non purus tincidunt vitae ultrices tellus eleifend. Praesent quam augue, accumsan nec tempus dapibus, pharetra ac lacus. Nunc eleifend consequat justo id dapibus. In ut consequat massa. Nunc scelerisque suscipit leo nec imperdiet.

Nullam vel tellus

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧

 


Articles