142 lines
2.0 KiB
CSS
142 lines
2.0 KiB
CSS
.slowRotateBird {
|
|
animation: rotateBird 1s infinite;
|
|
}
|
|
|
|
@keyframes rotateBird {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
30% {
|
|
transform: rotate(5deg);
|
|
}
|
|
60% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.floatingBird {
|
|
animation: floatBird 3s ease-out infinite;
|
|
}
|
|
|
|
@keyframes floatBird {
|
|
50% {
|
|
transform: translate(0, -20px);
|
|
}
|
|
}
|
|
|
|
.compressingBird {
|
|
animation: compressBird 3s infinite;
|
|
}
|
|
|
|
@keyframes compressBird {
|
|
0% {
|
|
transform: scaleY(0);
|
|
}
|
|
30% {
|
|
transform: scaleY(1.3);
|
|
}
|
|
60% {
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
transform: scaleY(0);
|
|
}
|
|
}
|
|
|
|
.upperSpeakingBird {
|
|
animation: upperSpeakBird 1s infinite;
|
|
}
|
|
|
|
@keyframes upperSpeakBird {
|
|
|
|
50% {
|
|
transform: rotate(-90deg) skewY(20deg) scale(1.5, 2.7);
|
|
}
|
|
}
|
|
|
|
.lowerSpeakingBird {
|
|
animation: lowerSpeakBird 1s infinite;
|
|
}
|
|
|
|
@keyframes lowerSpeakBird {
|
|
|
|
50% {
|
|
transform: rotate(135deg) skewY(20deg) scale(1.5, 1.5) translateX(-0.9em) translateY(-0.5em);
|
|
top: 23em;
|
|
left: 28em;
|
|
}
|
|
}
|
|
|
|
.topWaggingTail {
|
|
animation: topWagTail 1s infinite;
|
|
}
|
|
|
|
@keyframes topWagTail {
|
|
|
|
50% {
|
|
transform: rotate(60deg);
|
|
}
|
|
}
|
|
|
|
.middleWaggingTail {
|
|
animation: middleWagTail 1s infinite;
|
|
}
|
|
|
|
@keyframes middleWagTail {
|
|
|
|
50% {
|
|
transform: rotate(20deg) scale(1.1);
|
|
}
|
|
}
|
|
|
|
.bottomWaggingTail {
|
|
animation: bottomWagTail 1s infinite;
|
|
}
|
|
|
|
@keyframes bottomWagTail {
|
|
|
|
50% {
|
|
transform: rotate(-50deg);
|
|
}
|
|
}
|
|
|
|
.topAttention {
|
|
animation: tAttention 6s infinite;
|
|
}
|
|
|
|
@keyframes tAttention {
|
|
|
|
90% {
|
|
transform: rotate(60deg);
|
|
}
|
|
}
|
|
|
|
.bottomAttention {
|
|
animation: bAttention 6s infinite;
|
|
}
|
|
|
|
@keyframes bAttention {
|
|
|
|
90% {
|
|
transform: rotate(50deg);
|
|
}
|
|
}
|
|
|
|
.evolvingHeart {
|
|
animation: evolveHeart 6s infinite;
|
|
}
|
|
|
|
@keyframes evolveHeart {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(0.5);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
} |