.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); } }