Name: Animations: Timing
Uploaded: 2020-03-15T18:43:44.829Z
Duration: 4 min 14 s
Description: This video will teach you how to add animations & edit their timing. **Topics/Properties Covered:** - Animations - `animation-name` - `animation-duration` - `animation-delay` - `animation-iteration-count` **Challenge:** Add the animation given on screen to the `.box` selector with a duration & delay of 1 second, and an iteration count of 4.

scrimba

Watch in fullscreen

Animations: Timing

by Jad Khalili

Learn CSS Animations

About

Comments

Notes

Animations: Other Properties6:36

Animations: Timing

by Jad Khalili

Learn CSS Animations

Expand for more info

Animations: Other Properties6:36

index.css

run

preview

console

.box {
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
}

@keyframes grow {
    from {width: 100px; height: 100px; background: blue;}
    to {width: 10px; height: 10px; background: red;}
}

-4:13