Hello Readers!
In this blog, I am going to explain the concept of CSS3 Animations in simple words
CSS3 animation is used to animate the text from one CSS style to another and adding many effects to it.
Animations consist of two building blocks i.e @keyframe and Animate Properties.
A style describing the CSS animation and a set of keyframes that specify the start and end states of the animation's style whereas animation properties are used for Specifying the number of times an animation should be played.
Example of Animation Properties is:
div {
animation-duration: 2s;
animation-name: bounceIn;
}
Source Code:
<html>
<head>
<style type="text/css">
.animatedBorderBox {
display: block;
position: relative;
overflow: hidden;
margin: 12px;
width: 500px;
height: 200px;
color: #0e6d82;
font-size: 20px;
}
.animatedBorderBox:hover {
color: #0e5082;
}
.animatedBorderBox:hover .background {
background-position: 100px 0;
}
.animatedBorderBox:hover .content {
background-color: #b2eaf7;
}
.background,
.content {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.background {
transition: 1200ms;
background-color: #0e6d82;
background-image: repeating-linear-gradient(60deg, transparent, transparent 10px, #ffffff 10px, #ffffff 20px);
background-size: 30px;
}
.content {
transition: 200ms;
margin: 1px;
line-height: 200px;
text-align: center;
background-color: #c9f0f9;
}
</style>
</head>
<body>
<a href="javascript:;" class="animatedBorderBox">
<div class="background"></div>
<div class="content">HOVER ME</div>
</a>
</body>
</html>
0 Comment(s)