CSS Transitions vs. Animations

You might think transitions and animations refer to the same thing, but they don't. Transitions refer to slide transitions or the animation that occurs when you transition from one slide to the next. 

CSS Animations vs Transitions

CSS Transitions allow changing property values very smoothly, over a given duration. To create a transition effect, you must specify two things:

- the CSS property you want to add an effect to
- the duration of the effect

Note: If the duration is not specified, the transition will have no effect (default 0).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Output:


Hover over the div element below, to see the transition effect (<div> element is changing the width from 100px to 300px). 


The most often you can see transitions used on hover states, or when information on a page is added or removed. The hover states may be a subtle change in font color and information on the page may fade from invisible to visible. 

CSS Animations are more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state. 

Where a transition goes only from A to B, an animation can go from A, B, C to D. Or any number of stages as needed. (To see basics of CSS Animations you can read here.)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>                                          

Transitions are for creating a smooth transition from one state to another, and animations for a more complex series of movements. 

Enjoy coding!




Comments

Popular Posts