@keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } @keyframes float-slow-delay { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(15px); } } @keyframes float-medium { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes flow { to { stroke-dashoffset: -28; } } @keyframes draw { from { stroke-dasharray: 0 251; } to { stroke-dasharray: 196 251; } } .float-slow { animation: float-slow 6s ease-in-out infinite; } .float-slow-delay { animation: float-slow-delay 7s ease-in-out infinite; } .float-medium { animation: float-medium 4s ease-in-out infinite; } .flow-line { animation: flow 1s linear infinite; } .draw-donut { animation: draw 2s ease-out forwards; }