Different Types of Effects In CSS

Effects are the result of actions that are carried out to change the look and feel of HTML elements. CSS allows We to apply different types of effects on different types of HTML controls such as buttons, menu, images, and tables.
Types of  Effects:

• Opacity effects - Modify the opacity of an HTML element. For Instance using these effects we can make an element transparent so that any other element or background behind that element gets visible.

for example:
img{
opacity:0.6;
}

• Transition effects - Change the states of an element. Transition is a process of passing an act from one state to another. Generally, whenever the value of a CSS property changes, the result is instantly rendered on a web page. However when we apply transition effect on an element, it slowly transits from its old state to new.

For example:
transition-property- Specifies the property to which you apply the transition.
transition-duration - Specifies the time duration or the length of a transition.
transition-delay- Delays the transition
transition-timing-function -changes the speed of transitioning images.

DIV{
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ese-in-out;

} 

• Transformation effects-  Change the position or direction of the content of your web page.CSS allows you to apply this effect to the web content with the help of transform property. 

For example:
p{
-webkit-transform:rotate(45deg);
-webkit-perspective:1200px;
-webkit-perspective-origin:right;
}

• Animation effect - Refer to optical illusions, which are created by animating images and elements in a web page.

For example:
img{
-webkit-animation-name:resize;
-webkit-animation-duration:Is;
-webkit-animation-iteration-cont:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function:ease;
}