CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
An Element can move in a particular direction by turning over and over on an axis.
CSS Code:
.wrapper
{
text-align: center;
width: 800px;
margin: auto;
}
img{
width: 100%;
}
p{
font-size: 16px;
}
.item{
display: inline-block;
width: 21%;
border: 1px solid silver;
height: 288px;
vertical-align: top;
padding: 12px;
}
.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
@-webkit-keyframes rollIn{
0%{
opacity:0;
-webkit-transform:translateX(-100%)rotate(-120deg);
transform:translateX(-100%)rotate(-120deg)
}
100%{
opacity:1;
-webkit-transform:translateX(0)rotate(0);
transform:translateX(0)rotate(0)}
}
@keyframes rollIn{
0%{
opacity:0;
-webkit-transform:translateX(-100%)rotate(-120deg);
-ms-transform:translateX(-100%)rotate(-120deg);
transform:translateX(-100%)rotate(-120deg)
}
100%{
opacity:1;
-webkit-transform:translateX(0)rotate(0);
-ms-transform:translateX(0)rotate(0);
transform:translateX(0)rotate(0)
}
}
.rollIn{
-webkit-animation-name:rollIn;
animation-name:rollIn
}
HTML Code:
<div class="wrapper">
<!-- item -->
<div class="item animated rollIn">
<img src="logo.png" alt="" />
<h3>Web Designing</h3>
<p>Our designers offer services to small to mid size, and High level companies to expand their business</p>
</div>
<!-- End item -->
<!-- item -->
<div class="item animated rollIn">
<img src="logo.png" alt="" />
<h3>Web Development</h3>
<p>Our development team has efficiency to achieve the output specifically to meet up your requirements and your adequate level.</p>
</div>
<!-- End item -->
<!-- item -->
<div class="item animated rollIn">
<img src="logo.png" alt="" />
<h3>Mobile App Development</h3>
<p>Our dedicated mobile app experts are creative and familiar to accomplish your requirements as well as your business needs in cost-effective approach.</p>
</div>
<!-- End item -->
<!-- item -->
<div class="item animated rollIn">
<img src="logo.png" alt="" />
<h3>Software Development</h3>
<p>Our Highly skilled software Developers offers services to small to mid size, and High level companies in cost effective approach.</p>
</div>
<!-- End item -->
</div>