scrimba
CSS animations
Animations: Other Properties
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Animations: Other Properties
AboutCommentsNotes
Animations: Other Properties
Expand for more info
index.css
run
preview
console
.box {
width: 100px;
height: 100px;
background: blue;
border: 1px solid black;
animation-name: grow;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: 4;
}

@keyframes grow {
from {width: 100px; height: 100px; background: blue;}
to {width: 10px; height: 10px; background: red;}
}
Console
/index.html
-6:36