Friday 4 March 2016

CSS ANIMATION

CSS Animation property is used to create animation on the webpage. It can be used as a replacement of animation created by Flash and JavaScript.

CSS3 @keyframes Rule

The animation is created in the @keyframe rule. It is used to control the intermediate steps in a CSS animation sequence.

What animation does

An animation makes an element change gradually from one style to another. You can add as many as properties you want to add. You can also specify the changes in percentage.0% specify the start of the animation and 100% specify its completion.

How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with selector; otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:
  • The name of the animation
  • The duration of the animation

CSS animation properties

Property
Description
@keyframes
It is used to specify the animation.
animation
This is a shorthand property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
animation-delay
It specifies when the animation will start.
animation-direction
It specifies if or not the animation should play in reserve on alternate cycle.
animation-duration
It specifies the time duration taken by the animation to complete one cycle.
animation-fill-mode
it specifies the static style of the element. (when the animation is not playing)
animation-iteration-count
It specifies the number of times the animation should be played.
animation-play-state
It specifies if the animation is running or paused.
animation-name
It specifies the name of @keyframes animation.
animation-timing-function
It specifies the speed curve of the animation.

CSS animation example: changing background color

Let's see a simple CSS animation example that changes background color of rectangle from RED to BLACK.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>   
  5. div {  
  6.     width: 100px;  
  7.     height: 100px;  
  8.     background: red;  
  9.     -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */  
  10.     animation: myfirst 5s;  
  11. }  
  12. /* Chrome, Safari, Opera */  
  13. @-webkit-keyframes myfirst {  
  14.     from {background: red;}  
  15.     to {background: green;}  
  16. }  
  17. /* Standard syntax */  
  18. @keyframes myfirst {  
  19.     from {background: red;}  
  20.     to {background: green;}  
  21. }  
  22. </style>  
  23. </head>  
  24. <body>  
  25. <p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>  
  26. <div></div>  
  27. </body>  
  28. </html>  

CSS animation example: Moving Rectangle

Let's take another example to display animation with percentage value.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>   
  5. div {  
  6.     width: 100px;  
  7.     height: 100px;  
  8.     background: red;  
  9.     position: relative;  
  10.     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */  
  11.     animation: myfirst 5s;  
  12. }  
  13. /* Chrome, Safari, Opera */  
  14. @-webkit-keyframes myfirst {  
  15.     0%   {background:red; left:0px; top:0px;}  
  16.     25%  {background:yellow; left:300px; top:0px;}  
  17.     50%  {background:blue; left:200px; top:300px;}  
  18.     75%  {background:green; left:0px; top:200px;}  
  19.     100% {background:red; left:0px; top:0px;}  
  20. }  
  21. /* Standard syntax */  
  22. @keyframes myfirst {  
  23.     0%   {background:red; left:0px; top:0px;}  
  24.     25%  {background:yellow; left:300px; top:0px;}  
  25.     50%  {background:blue; left:300px; top:200px;}  
  26.     75%  {background:green; left:0px; top:200px;}  
  27.     100% {background:red; left:0px; top:0px;}  
  28. }  
  29. </style>  
  30. </head>  
  31. <body>  
  32. <p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>  
  33. <div></div>  
  34. </body>  
  35. </html>  


CSS Gradient

CSS gradient is used to display smooth transition within two or more specified colors.

Why CSS Gradient

These are the following reasons to use CSS gradient.
  • You don't have to use images to display transition effects.
  • The download time and bandwidth usage can also be reduced.
  • It provides better look to the element when zoomed, because the gradient is generated by the browser.
There are two types of gradient in CSS3.
  1. Linear gradients
  2. Radial gradients

1) CSS Linear Gradient

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, you must have to define two or more color stops. The color stops are the colors which are used to create a smooth transition. Starting point and direction can also be added along with the gradient effect.

  1. background: linear-gradient (direction, color-stop1, color-stop2.....);  

(i) CSS Linear Gradient: (Top to Bottom)

Top to Bottom Linear Gradient is the default linear gradient. Let's take an example of linear gradient that starts from top. It starts red and transitions to green.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {  
  6.     height: 100px;  
  7.     background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */  
  8.     background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */  
  9.     background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */  
  10.     background: linear-gradient(red, green); /* Standard syntax (must be last) */  
  11. }  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h3>Linear Gradient - Top to Bottom</h3>  
  16. <p>This linear gradient starts at the top. It starts red, transitioning to green:</p>  
  17. <div id="grad1"></div>  
  18. </body>  
  19. </html>  

CSS Transition

The CSS transitions are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.
You should specify two things to create CSS transition.
  • The CSS property on which you want to add an effect.
  • The time duration of the effect.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)