CSS Animations:
Using Css we can add animations into our components by rotating or translating them.
Following are some basic transformation that can make our web page more attractive:
- Rotate: With the help of this animation we will be able to rotate our element at a certain degree
- transform : rotate(45deg);
This will rotate the component by 45 degrees.
- Scale: The scale can resize the element on say hover.
- transform : scale(2);
This is will increase the size twice of the original size to create an animation.
- Translate: This property will help us to reposition the component.
- transform : translate(50px 50px)
This will translate 50px in the x axis and 50px in the y axis
- Skew: This interesting animation will skew the component in certain degrees of x and y axis.
- transform : skew(20deg , 10deg)
20 degrees in x and 10 degrees in y axis.
Example:
The following example will make sense of above discussed animations:
<!DOCTYPE html>
<htm>
<head>
<title>Animations</title>
<style>
div#div1{
border:3px solid black;
background-color:red;
width:200px;
height:200px;
}
div#div2{
border:3px solid black;
background-color:blue;
width:200px;
height:200px;
}
div#div3{
border:3px solid black;
background-color:yellow;
width:200px;
height:200px;
}
div#div4{
border:3px solid black;
background-color:green;
width:200px;
height:200px;
}
div#div1:hover{
transform:scale(2);
}
div#div2:hover{
transform:rotate(45deg);
}
div#div3:hover{
transform:skew(20deg,10deg);
}
div#div4:hover{
transform:translate(50px,50px);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
0 Comments