<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Animation
- keyframes, bounce</title>
<style>
.wrap{
width:
90%;
margin:
20px
auto;
}
.ground
{
border-bottom:
solid
6px
#c21515;
position:
relative;
top:300px;
}
.circ {
background-color: #6cff;
border-radius:
100%;
margin:
2em
2em
0;
display:
inline-block;
position:
relative;
width:
100px;
height:
100px;
}
.c1{
animation-name: bounce1;
animation-duration: 3s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1.5s;
background-color:yellow;
}
.c2{
animation-name: bounce1;
animation-duration: 2.5s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1s;
background-color: blue;
}
.c3{
animation-name: bounce1;
animation-duration: 3s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-fill-mode:
forwards;
animation-delay: 1.5s;
background-color: red;
}
@keyframes bounce1{
0%, 100% {top:0;}
50% {top:
300px;}
}
</style>
</head>
<body>
<div class="wrap">
<div
class="circ c1"></div>
<div
class="circ c2"></div>
<div
class="circ c3"></div>
<div
class="ground"></div>
</div>
</body>
</html>
0 Comments