CodePark.btn { transition: transform 200ms ease-out; }
.btn:hover { transform: scale(1.05); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.loader { animation: pulse 1.5s ease-in-out infinite; }
A transition animates a property between two values when it changes. For example, it runs on :hover or when a class is added. It needs a trigger, and it only knows a start and an end. When the state goes back, it plays in reverse.
An animation uses @keyframes to define any number of steps in between. It can also:
- start on its own when applied
- loop, with
animation-iteration-count - alternate direction
- wait for a delay
- pause, with
animation-play-state - keep its end state, with
animation-fill-mode
Use transitions for simple state changes, like hover, focus, or open and closed. Use animations for motion with several steps or loops, such as loaders and attention cues. Both fire JavaScript events: transitionend and animationend.
- A transition moves between two states and needs a trigger.
- An animation uses
@keyframesand can have many steps. - Animations can loop, alternate, pause and keep their end state.
- Use transitions for state changes and animations for sequences.