animation
Utilities for animating elements with CSS animations.
| Utility | Styles |
|---|---|
animate.spin | animation: var(--animate-spin); /* spin 1s linear infinite */@keyframes spin { to { transform: rotate(360deg); }} |
animate.ping | animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; }} |
animate.pulse | animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */@keyframes pulse { 50% { opacity: 0.5; }} |
animate.bounce | animation: var(--animate-bounce); /* bounce 1s infinite */@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }} |
animate.none | animation: none; |
animate[*<value>*] | animation: var(*<custom-property>*); |