CSS Basic Animation Effects can be achieved using the @keyframe rule and the css animation properties. There are eight css animation properties and some of them will be used in this tutorial.

First of all to begin this tutorial we create a simple ‘div’ element with some css styles to make a blue circle.

See the Pen cssBasicAnimationEffects3 by Daniel (@Parsons) on CodePen.

To move an element from the left to the right then down and back to the left again is simple with the @keyframe rule and using the ‘animation-name‘ and ‘animation-duration‘ css properties. The ‘animation-name’ is a reference link to the name of the @keyframe rule and the ‘animation-duration’ is as the name suggests the duration of the animation.

There are three keyframes defined in the example below:

  1. 0% – The behaviour of the element at the beginning of the animation.
  2. 25% – The behaviour of the element on the 25% timeframe of the animation. (move to the left: 200px position, this moves the element right.)
  3. 100% – The behaviour of the element at the end of the animation. (move back to the left:0px position)

See the Pen cssBasicAnimationEffects4 by Daniel (@Parsons) on CodePen.

To move the element from the right then down and back to the top-left again can be done by adding two more keyframes as demonstrated in the example below. The ‘animation-iteration-count‘ property with a value of ‘infinite’ is also added to make the animation to run continously.
The newly added keyframes are:

  1. 50% – The behaviour of the element on the 50% timeframe of the animation. (move down to the top:100px value and also keep the same left:200px position as the ‘25%’ keyframe.
  2. 75% – The behaviour of the element on the 75% timeframe of the animation. (move left to the left:0px position and also keep the same top:100px position as the ‘50%’ keyframe)

See the Pen cssBasicAnimationEffects5 by Daniel (@Parsons) on CodePen.

Now that we have created the keyframes we should put them to some more use. First of all lets add a colour change for each keyframe.

See the Pen cssBasicAnimationEffects6 by Daniel (@Parsons) on CodePen.

Another effect is to change the shape of the animation from circle to square. This can be done simply by adding ‘border-radius:0’ to the ‘50%’ keyframe.

See the Pen cssBasicAnimationEffects7 by Daniel (@Parsons) on CodePen.

It is always a good idea to add browser prefixes to support older browsers. Autoprefixer is a resource that will automatically generate prefixes by simply pasting in your css.

See the Pen cssBasicAnimationEffects8 by Daniel (@Parsons) on CodePen.


More on CSS Animations and Transitions

CSS3 logo. CSS Basic Animation Effects

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *