An animation takes place when the style of an element changes.
To use the animation by CSS3 we have to define some keyframes. These @keyframes will be having the styles of an element at particular time.
For the CSS3 animation we need to specify the animation-name, animation-duration, animation-delay, animation-duration, animation-iteration-count etc.
Below is the example of "loading" using CSS3 keyframes:-
HTML-
<body>
<div class="content">
<h3>CSS3 Loading animations</h3>
<div class="container">
<div class="loading_1">
<p>Loading 1</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="container">
<div class="loading_2">
<p>Loading 2</p>
<div class="line"></div>
</div>
</div>
<div class="container">
<div class="loading_3">
<p>Loading 3</p>
<div class="ring">
<div class="ball_container">
<div class="ring1"></div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS-
body {
margin: 0 auto;
padding: 20px;
max-width: 470px;
font-family: 'Open Sans',sans-serif;
font-weight: 400;
color: #777;
background-color: #f7f7f7;
}
.content {
padding: 15px;
overflow: hidden;
background-color: #999966;
}
h1 {
padding-bottom: 15px;
border-bottom: 1px solid #d8d8d8;
font-weight: 600;
}
h3 {
padding-bottom: 20px;
color: #000;
}
p {
margin: 0;
padding: 10px 0;
color: #000;
}
.container{
float: left;
width: 100px;
height: 100px;
margin: 0 10px 10px 0;
padding: 20px 20px 20px;
border-radius: 5px;
text-align: center;
background-color: #c65353;
}
.container p {padding: 0 0 20px;}
.container:last-child {margin-right: 0;}
.line {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: #33001a;
}
.ring {
position: relative;
width: 45px;
height: 45px;
margin: 0 auto;
border: 4px solid #33001a;
border-radius: 100%;
}
.ball_container {
position: absolute;
width: 12px;
height: 45px;
left: 17px;
top: 0px;
}
.ring1 {
position: absolute;
top: -11px;
left: 0;
width: 16px;
height: 16px;
border-radius: 100%;
background: #33001a;
}
.loading_1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.loading_1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.loading_1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}
.loading_3 .ball_container {animation: loadingC 1.3s linear infinite;}
@keyframes loadingA {
0 {height: 15px;}
50% {height: 35px;}
100% {height: 15px;}
}
.loading_2 .line {animation: loadingB 1.5s cubic-bezier(.17,.37,.43,.67) infinite;}
@keyframes loadingB {
0% {width: 15px;}
50% {width: 35px; padding: 4px;}
100% {width: 15px;}
}
@keyframes loadingC {
0 {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Here is the demo of above example:-
https://jsfiddle.net/vz29wd9j/
0 Comment(s)