Continuous animation
by Roberto Apasajja
HTML
Rotate:<br><div class="satu">D</div>
pulse:<br><div class="dua">E</div>
CSS
.satu {
background: grey;
width:100px;
height: 100px;
}
.satu:hover {
animation: rotationsatu 2s infinite linear;
}
@keyframes rotationsatu {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.dua {
margin-left: auto;
margin-right: auto;
background: grey;
width: 0;
height: 0;
border: 1px solid red;
border-radius: 99em;
}
.dua:hover {
animation: rotationdua 1s infinite linear;
}
@keyframes rotationdua {
from {
width: 50px;
height: 50px;
}
to {
width: 100px;
height: 100px;
background: #fff;
}
}