【Tailwind】动画解读：Tailwind CSS Animation Examples

Tailwind CSS Animation Classes

Class	CSS Properties	中文翻译
animate-none	`animation: none;`	无动画效果。
animate-spin	`animation: spin 1s linear infinite;` `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`	无限旋转动画，1秒内线性旋转360度。
animate-ping	`animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;` `@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }`	无限放大消失动画，1秒内放大至2倍并逐渐消失。
animate-pulse	`animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;` `@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }`	无限脉冲动画，2秒内透明度在1和0.5之间变化。
animate-bounce	`animation: bounce 1s infinite;` `@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }`	无限弹跳动画，1秒内元素上下弹跳。

演练场：https://www.tutorialspoint.com/tailwind_css/tailwind_css_animation.htm

Example

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <p>（ Hover the smile ）</p>
    <div class="flex items-center justify-center 
                hover:animate-spin delay-500">
        <div class="w-28 h-28 m-4 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            animate-spin
        </div>
    </div>
    <div class="flex items-center justify-center 
                hover:animate-ping delay-500">
        <div class="w-28 h-28 m-4 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            animate-ping
        </div>
    </div>
    <div class="flex items-center justify-center 
                hover:animate-pulse delay-500">
        <div class="w-28 h-28 m-4 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            animate-pulse
        </div>
    </div>
    <div class="flex items-center justify-center 
                hover:animate-bounce delay-500">
        <div class="w-28 h-28 m-4 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            animate-bounce
        </div>
    </div>
    
</body>
</html>