<!DOCTYPE html>
<html>
<head>
<title>
CSS Animation and @Keyframes Property
</title>
<style>
div {
width: 200px;
height: 200px;
margin: 200px;
border-radius: 100px;
background-color: red;
animation: circle 8s infinite;
}
@keyframes circle {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Animation and @Keyframes Property
</title>
<style>
body {
background-color: #fff;
}
.battery {
height: 140px;
width: 321px;
border: 5px solid #000;
border-radius: 7px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.top {
height: 40px;
width: 25px;
background-color: #000;
position: relative;
left: 325px;
top: 52px;
border-radius: 0 3px 3px 0;
}
.charge1,
.charge2,
.charge3,
.charge4 {
width: 75px;
height: 130px;
background-color: #3BC700;
position: relative;
opacity: 0;
}
.charge1 {
margin: 9px 2px 3px 6px;
bottom: 44px;
animation: charge-1 2s infinite;
}
.charge2 {
margin: 9px 9px 3px 9px;
bottom: 183px;
left: 75px;
animation: charge-2 2s infinite;
}
.charge3 {
margin: 9px 9px 3px 12px;
bottom: 322px;
left: 150px;
animation: charge-3 2s infinite;
}
.charge4 {
margin: 9px 2px 3px 15px;
bottom: 461px;
left: 225px;
animation: charge-4 2s infinite;
}
@keyframes charge-1 {
25%,
100% {
opacity: 1;
}
}
@keyframes charge-2 {
0%,
25% {
opacity: 0;
}
50%,
100% {
opacity: 1;
}
}
@keyframes charge-3 {
0%,
50% {
opacity: 0;
}
75%,
100% {
opacity: 1;
}
}
@keyframes charge-4 {
0%,
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="battery">
<div class="top"></div>
<div class="charge1"></div>
<div class="charge2"></div>
<div class="charge3"></div>
<div class="charge4"></div>
</div>
</body>
</html>
Output:
Publicación traducida automáticamente
Artículo escrito por sparkyboom y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA