Animation using CSS


0  0 2016-09-17 03:11:05

Cascading style sheet (CSS) provides you with various functionalities to make your Web page more user interactive and dynamic. Some of these functionalities are applying effects, creating frames, and customizing the appearance of control on a Web Page.

Type of Effects in CSS:
1. Opacity Effects
2. Transition Effects
3. Transformation Effects
4. Animation Effects

Effects can be made to appear in a Web page on various events, such as scroll, mouse hover, and mouse click.

Opacity Effects:
This effect introduced in CSS3, allow you to change the transparency of HTML elements using the opacity property. By using these effects you can change the opacity of almost each element of an HTML document like button, text, images etc.

Example :
    Opacity: 0.6;  
Here, we have set the opacity of IMG element to 0.6 means 60%. It means that the element get transparent by 60%.


Transition Effects:
This means change the state of element. Transition is a process of passing an act from one state to another. When you apply transition effects on an element, it slowly transits from its old state to new.

Following are the transition properties:
• transition-property              :  Specify the property which you apply the transition
• transition-duration              : Specify the time duration
• transition-delay                  : Delays the transition
• transition-timing-function     : Changes the speed of transitioning images

For Example:
    transition-property: opacity;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;         
Here, we have applied the transition effect on the opacity property of the DIV element and set the time limit 2 second. The degree of smoothness of the effect is ease-in-out property.


Transformation effects:
Transformation is a process of changing the position, direction, size, or style of an object. CSS allow you to apply this effects to the web content with the help of transform property.

Following are the transform property :
• transform             :Specify the transform function to apply it on an element. the possible values are matrix, rotate, scale, scaleX,scaleY, skew,skewX, skewY, translate, translateX, translate.
• transform-origin    : Specifies the origin of the transformation for an element. The possible values of this property are left, right, center, top, bottom, 50% 50%.
• Transform-style    : Specifies whether the transformation apply in 2D or 3D of an element. The possible values of this property are flat and perspective-3D.
• perspective          : Shows an element from different angles and perspective.
• Perspective-origin : Specifies the origin of the transformation for an element. The possible values of this property are left, right, center, top, bottom, 50% 50%.
• backface-visibility : Specifies, whether or not the back side of an element is visible. The possible values of this property are visible and hidden.

For example:
    -webkit-perspective: 1200px;

Here, we have defined the transform property to rotate the image element. The perspective property has been set to 1200px and origin to right, which shows you to view the element at 1200point from right side.


Animation Effects :Animation is the process of creating the illusion of motion by placing still images one after another in a typical format.

Following are the animation properties:
• animation-name               : Specifies the name of the animation that is to be applied on an element.
• animation-duration           : Specifies the time duration of animation takes to complete one cycle.
• animation-timing-function  : Specifies the progress  of an animation.
• animation-iteration-count  : Specifies the number of animation cycles.
• animation-direction          : Specifies whether the animation is played in reverse or alternate direction.
• animation-delay               : Specifies a time period after which an animation starts.

For example:
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1s;
Here, we have applied the resize animation effect and set the animation duration to 1 second. The iteration count is set to infinite, which means that the animation cycle is repeated infinite time.




Comments (0)

Post Your Comments


Hong Kong Office

Find Us On

Website Development Company
Digital Marketing
website development company in Hong Kong
website designer in pune