CSS 3 Transitions CSS 3 Animation

0 114

CSS 3 Transitions and CSS 3 Animation

in this tutorial, we will discuss on CSS 3 Transitions and CSS 3 Animation


Earlier before CSS 3 version combination of Html CSS and JavaScript used to animate any object on a web page.IN 2007 Apple introduced CSS transitions which later become part of safari, later Mozilla worked on transitions and added the module to CSS level 3 specifications

All web browser do not support to CSS3 transitions supported browsers are.

Apple Safari 3.1 and later which requires the prefix –webkit
Google Chrome which requires the prefix –webkit
Mozilla Firefox 3.7 alpha and later which requires the prefix –moz
Opera 10.5x and later which requires the prefix –o

To required specification are follows to perform CSS transitions.

  • The CSS property that needs the effect.
  • The duration of the effect.

CSS 3 transition properties are.

Property Description
transition transition property is a shorthand property used for setting four transitions properties into a single property.
transition-property transition-property used for the specifying name of CSS property which transition value is set.
transition-duration used for transition duration default value is 0.
transition-timing-function used to describe how to speed during a transition will be calculated. The default value is "ease".
transition-delay use to define the start of transition default value is 0.

CSS 3 Animation

Through CSS 3 animation we can animate transitions of one CSS style configuration to another.
There are two components to follow to animate transitions.

  • In CSS3 animations style describing the animation.
  • To start and end state of any animation Keyframes set is used.

There are three advantages over script base animations and they are…

  • 1-CSS3 animations easy to use any web designer can create animations in the web page without having knowledge of JavaScript.
  • 2-CSS3 animation easily loads in a browser without taking much internet speed or in the slow net issue while JavaScript animations need engine rendering uses the frame-skipping techniques to allow smooth flow of animation.
  • 3-CSS3 animations allow to a browser to control animations sequence optimize performs.

Configuring the Animations

To create an animation sequence animation property is used by styling element. This property will control duration timing and sequence of the animation. @keyframes will define the appearance of the animation in webpage and keyframe used to define the rendering of the element in the animation sequence.

@keyframes rule and Properties are

The property Description
@keyframes @keyframes is used to specify the animation.
Animation Animation is a shorthand property to represent the properties of animations.
animation-name used to specify the name of @keyframes.
animation-duration used to specify the duration cycle of animation in Seconds or in milliseconds its default value is 0.
animation-timing-function used to describe the progress of animation over its time cycle.its-its the default value is "ease".
animation-delay this property will define start value of animation.its default value is 0.
animation-iteration-count this property is used to play animation number of times.its default value is 1.
animation-direction this property will define whether or not the animation play reverses on alternative cycle .it have the normal value.
animation-play-state animation play state property defines a state of the animation that whether it is running or paused.it has the running default value.



Leave A Reply

Your email address will not be published.