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;
}
animation property
element class
animation name
duration
repeat
Keep practicing and experimenting
Find all materials at dotdoodl.com
Next class: Morph Dot
Thanks again!