Website designs are evolving constantly. From responsive design, beautiful typography, perfect color coding schemes, illustrations, the website creators are coming up with new ideas and designs every day.

Users nowadays have high expectations of the user interfaces because of such high-quality content available over the internet. As the website interfaces are evolving so is the technology behind them. One major component responsible for enhancing the website interface is CSS.

CSS or Cascading Style Sheets are responsible for making sites much interactive by defining their style, layout, designs. The latest standard for CSS that is, CSS3 has introduced the concept of animations and transformations which enhance the user experience by adding extra depth to the user interface. With CSS animations and transitions, you can tell stories, create lavishing effects and make user interaction with your website much effective and meaningful.

An animation is just a simulation of movement which is created by displaying a series of objects like pictures one after another. Transition, on the other hand, is basically a process in which an object changes from one state to another. But, when we talk about web animations there are basically three types – CSS animations or keyframe animations, CSS transitions and JavaScript animations.

CSS Animations

To create animations in CSS we need to change the CSS properties of an element such as an image or text, for a certain period of time. We can change the properties of elements as many times as we want and can set the duration of the animation as well.

Specifying @keyframes

CSS animations are defined bit with keyframes. These keyframes are the intermediate points of animation. All the CSS animations are specified under the @keyframes rule. These keyframes specify what happens to the element at a particular moment that is,

• what properties are changing
• when the element animates
• how the element animates

You can define your own keyframe as:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Here ‘to’ and ‘from’ specify the start and end of the animation. We can also specify animations for intermediate moments of time between the start and end like this:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Here 0% represents the start of the animation, 100% represents the end of the animation, and 50% signifies the change in-between the start and end. But, how do we tell the browser for how much time animation should take place? We do this with the help of certain animation properties. These animation properties are associated with the element to be animated. For example:

element_name
{
animation_property: value;
style_property: value;
}

Here element could be any HTML tag such as div, span, img, p etc. and style_property is any CSS styling property like background_color, width, height etc. Let us now look at some animation properties in details.

1. @keyframes: Keyframes are used to specify the animation code as discussed above.
2. animation-name: The name specified with @keyframes is the name of the animation. This name is used to reference the keyframes with the element to be animated.
3. animation-duration: It is used to specify the duration time of the animation in seconds or milliseconds. For example, if we set it to 5 seconds then, the animation will run for 5 seconds only. If we do not set this property, then the animation will not run at all as its default value is 0.
4. animation-delay: We can delay the start of animation by specifying animation-delay time. For example, if you want to start the animation 5 seconds after the page loads in the browser, just set animation-delay to 5s.
5. animation-direction: We can tell the browser whether an animation moves in the reverse direction or alternate cycles with this property. For example, if you want the animation to run from start to end then set the value of animation-duration as ‘normal’. If you want it to run from end to start then just set the value to ‘reverse’.
6. animation-fill-mode: We can specify the style of the element when the animation is not playing with this mode i.e. when the animation is delayed or finished then what should the style of the element be.
7. animation-iteration-count: The number of times an animation can be played is represented by this property. For example, if you want to play the animation once set it to 1, or if you want the animation to play forever, just set it to ‘infinite’.
8. animation-timing-function: This property is used to specify the speed curve of animation like linear, acceleration or de-acceleration.
9. Animation: It is the shorthand property for setting all the animation properties.

For example, you can animate a bouncing object with the following code snippet. Notice how shorthand notation for animation has been used here.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Transitions

CSS transitions are applied to properties of elements for certain duration of time-based on certain timing functions aka easing functions. By timing function, we mean a function that will change the properties of the elements from one state to another like linear progression, acceleration or de-acceleration. You might have noticed that an image slides or transforms into another image on hover or a sound plays on mouse click. These are all transition effects that can make a website interactive.

Easing functions are important for creating transitions. They specify how the properties will change. They can also alter the rate at which value of properties changes from the starting point to the end point of a transition. You can apply transitions in the following way:

element 
{
style_property: value;
transition_property: value;
}

Here element specifies the HTML element you want to transform like div, H1, img etc. style_property is the CSS styling applied on that element. Let us now look at some transition properties:

• transition-property: Transition effect will always be applied on the CSS property of an element like its width, height, color or shape. The value of this attribute specifies that CSS property of the element. The transition effect will start whenever this property changes for example on mouse hover or on click.
• transition-timing-function: This is the ease function to be applied to the element. This property is used to specify the speed curve of transition like ease-in, ease-out, linear etc.
• transition-duration: It is just like animation-duration property. It is used to specify the time duration of the transition effect in seconds or milliseconds. For example, if we set it to 5 seconds then, the transition will affect will complete in 5 seconds. If we do not set this property, then there will be no transition at all as its default value is 0.
• transition-delay: With this property, we can specify the time duration to delay the transition effect. For example, if you want to start the effect 5 seconds after the mouse hover, just set transition-delay to 5s.
• transition: It is the shorthand property for setting all the above transition properties together.

For example, the following code will change the width of div element on mouse hover. See the transition shorthand property applied here.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animations vs. Transitions

Similarities between Animations and Transitions

• Both transition and animation are used to visualize changes in the properties of an element.
• We can specify the duration for how long the transition and animation should take place.
• We have certain timing functions to alter the rate of going from one value to another for transitions as well as animations.

Differences between Animations and Transitions

• CSS transitions are reactive. They need to be triggered by the users. Animations on the other hand, run whenever the page loads on the browser. They are not required to be triggered.
• Transitions run once and then stop. Then, we have to trigger them again and again while animations can loop. They can start on their own stop and then again start.
• The browser takes care of the transitions itself. We just need to specify the start and end of the transition. We can set the transition effect but we cannot alter the rate of change of a transition in between. For example, if an image slides on mouse hover, we will just see it fade in or fade out as we hover over it.
• Animations, on the other hand, provide the flexibility to change the properties in between the start and end. This happens with the help of keyframes. For example, we can set the color of an image to red for the first 5 seconds, then as blue for next 5 seconds, then as green for the next 5 seconds and yellow for the last 5 seconds of the animation. Hence, we have a control over animations.

Vendor Prefixes

All the CSS3 features are not supported by every browser. Hence, we use prefixes along those CSS properties for specific browsers such as -webkit- (Safari), -moz- (Firefox), or -o- (Opera). This allows the browser markers to add a support for that CSS3 feature. These prefixes are known as vendor prefixes or CSS Browser prefixes. Hence, we need to put vendor prefixes along with the animation and transition properties as well. For example, consider the code below and see how the vendor prefixes for Safari have been used:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Tip! You can avoid this hustle by using libraries such as -prefix-free. It is a JavaScript library which will add current browser’s prefix to any CSS code. Check out many such libraries available on the web.

Conclusion

Website developers can apply animations and transformations to attract users to your websites. You can use them to enhance forms, notifications, background graphics, images, charts, doodles, call to action buttons and what not. Just use your imagination and you can find a way to amaze your users. Remember that even a small change in your website can make it look much better and increase its value. So, have you used animations over your website yet? Share your thoughts about using animations and transitions.