CSS Animations
Gunakan @keyframes untuk animasi multi-step.
animation-nameanimation-durationanimation-timing-functionanimation-iteration-count— infinite untuk loopanimation-direction— alternate untuk bolak-balik
Gunakan @keyframes untuk animasi multi-step.
animation-nameanimation-durationanimation-timing-functionanimation-iteration-count — infinite untuk loopanimation-direction — alternate untuk bolak-balik@keyframes bounce {0%,100% {
transform:translateY(0);
}50% {
transform:translateY(-20px);
} }
@keyframes spin {from {
transform:rotate(0deg);
}to {
transform:rotate(360deg);
} }
@keyframes pulse {0%,100% {
opacity:1;
}50% {
opacity:0.5;
} }
.bouncing {
display:inline-block;
font-size:32px;
animation:bounce 1s ease infinite;
}
.spinning {
display:inline-block;
font-size:32px;
animation:spin 2s linear infinite;
margin-left:24px;
}
.pulsing {
display:inline-block;
padding:12px 24px;
background:#F06D5B;
color:white;
border-radius:8px;
font-weight:bold;
animation:pulse 1.5s ease infinite;
margin-left:24px;
}