All Categories

Introduction To CSS3 Animations

This blog is a continuation of the previous CSS3 blog in this chain. In this blog we will be discussing about Animation and how it can be done? So, what is Animation?
Animation is the process of making shape changes as well as creating motions with elements. CSS3 allows animation of most HTML elements without using JavaScript or Flash. An animation lets an element gradually change from one style to another.
Now that we understand Animation, the next thing that comes in mind is – How can Animation be done? The answer is – “By using ‘keyframes’ feature”.

Using @keyframes

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at the time interval.
Keyframes will control the intermediate animation steps in CSS3.

Example of keyframes:

@keyframes animation {
from {background-color: red;}
to {background-color: green;}
}
div {
width: 500px;
height: 100px;
background-color: yellow;
animation-name: animation;
animation-duration: 4s;
}

Sub-properties:

  1. animation-name: name of the @keyframes at-rule to manipulate.
  2. animation-duration: the length of time it takes for an animation to complete one cycle.
  3. animation-timing-function: establishes preset acceleration curves such as ease or linear.
  4. animation-delay: the time between the element being loaded and the start of the animation sequence.
  5. animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
  6. animation-iteration-count: the number of times the animation should be performed.
  7. animation-fill-mode: sets which values are applied before/after the animation.
  8. animation-play-state: pause/play the animation.

Let us now discuss some of these sub-properties:

  • animation-duration:

@keyframes animation {
from {background-color: red;}
to {background-color: green;}
}
div {
width: 500px;
height: 100px;
background-color: yellow;
animation-name: animation;
animation-duration: 4s;
}

In the above example animation-duration is specified as 4s.

  • animation-timing-function:

    #div1 {animation-timing-function: linear;}
    The animation-timing-function value can be linear, ease, ease-in, ease-out or ease-in-out.

  • animation-delay:

    #div {animation-delay: 4s;}
    The animation-delay value can be an integer value.

  • animation-direction:

    #div {animation-direction: reverse;}
    The animation-direction can be reverse or alternate.

  • animation-iteration-count:

    To set how many times the animation should run, one can use animation-iteration-count. The value can be integer number or if you require to repeat the animation infinite times you can set the value to infinite. Example for infinite animation:
    div{
    animation-duration: 4s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    }

  • animation-fill-mode:

    The value can be changed to none, forwards, backwards, both, inherit or initial.
    #div{animation-fill-mode: forwards;}

  • animation-play-state:

    The value can be changed to paused, running, initial or inherit.
    #div{animation-fill-mode: paused;}

    Deep Explanation 

    The animation CSS property is a shorthand property for the various animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

  • <single-animation-iteration-count> :The number of times the animation is played. The value must be one of those available in animation-iteration-count.
  • <single-animation-direction>: The direction in which the animation is played. The value must be one of those available in animation-direction.
  • <single-animation-fill-mode>: Determines how styles should be applied to the animation’s target before and after its execution. The value must be one of those available in animation-fill-mode.
  • <single-animation-play-state>: Determines whether the animation is playing or not. The value must be one of those available in animation-play-state.

 
 

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}
.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}
.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

One more example to understand the use of CSS keyframes and animation timing function

 

<body>
	<img src="imag1.jpg" alt="bicyle" width="300px" height="200px">
</body>
img{
      	    border:5px solid red;
      	    position: relative;
           animation-name:drive;
           animation-duration:10s;
           animation-delay:1s;
          /*animation-direction:reverse;*/
          animation-timing-function:ease-in;
          /*animation-timing-function:linear;*/
          /*animation-timing-function:ease-in;*/
         /*animation-iteration-count:2;
*/
		animation-iteration-count:infinite;
      }
      /*
         We can have the short hand property like
         animation:drive 12s linear infinite;
      */
       @keyframes drive{
       	  /*from{left:0px;}
       	  to{left: 500px;}
       }
   instead of using from and to we can also use like this
       */
         0%{left:0px;}
         100%{left:500px;}
         20%{border:5px solid red;}
         40%{border:5px solid blue;}
         60%{border:5px solid green;}
         100%{border:5px solid yellow;}

Run the above code to understand the use of animation timing function.

Conclusion:

I hope you have learned all the animation functions. If you have any query, do write to us at [email protected]

Keep visiting our site www.acadgild.com for more updates on Frontend and other technologies.

 

AngularJS course details

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close