One div per shape
Different styling applied to each
Two separate animations
Two separate animation assignments
1
@keyframes bounce { 45% { /* Same original width, height */ } 50% { /* New styles */ } 65% { /* Same original width, height */ } } @keyframes shadow-thing { 50% { /* New styles */ } }
2
@keyframes bounce { 45% { } 50% { transform: translateY(45px); } 65% { } }
@keyframes bounce { 45% { width: 60px; height: 60px; } 50% { transform: translateY(45px); width: 80px; height: 40px; } 65% { width: 60px; height: 60px; } }
3
@keyframes shadow-thing { 50% { width: 30px; opacity: .5; } }
4
.dot { animation: bounce 700ms infinite ease-in-out; }
animation property
element class
animation name
duration
repeat
transition timing
5
.shadow { animation: shadow-thing 700ms infinite; }
Keep practicing and experimenting
Find all materials at dotdoodl.com
Next class: Morph Dot
Thanks again!
By icn
Intro to CSS animation class 2: Bounce Dot, for dotdoodl.com series