# Transitions and Animations

CSS allows you to animate HTML elements without using JavaScript or Flash.

## 1. CSS Transitions

Transitions allow you to change property values smoothly, over a given duration.

To create a transition effect, you must specify two things:
1.  The CSS property you want to add an effect to.
2.  The duration of the effect.

```css
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
```

### Transition Properties
*   `transition-property`: Specifies the name of the CSS property the transition effect is for.
*   `transition-duration`: Specifies how many seconds or milliseconds the transition effect takes to complete.
*   `transition-timing-function`: Specifies the speed curve of the transition effect (`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`).
*   `transition-delay`: Specifies a delay (in seconds) for the transition effect.

**Shorthand:** `transition: property duration timing-function delay;`

```css
div {
  transition: width 2s linear 1s;
}
```

## 2. CSS Animations

Animations allow an element to gradually change from one style to another. You can change as many CSS properties you want, as many times as you want.

### `@keyframes` Rule
To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

```css
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Or using percentages */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
```

### Applying the Animation

```css
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
```

### Animation Properties
*   `animation-name`: Specifies the name of the `@keyframes` animation.
*   `animation-duration`: Specifies how long time an animation should take to complete one cycle.
*   `animation-delay`: Specifies a delay for the start of an animation.
*   `animation-iteration-count`: Specifies the number of times an animation should run (`infinite` or a number).
*   `animation-direction`: Specifies whether an animation should be played forwards, backwards or in alternate cycles (`normal`, `reverse`, `alternate`, `alternate-reverse`).
*   `animation-timing-function`: Specifies the speed curve of the animation.
*   `animation-fill-mode`: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

**Shorthand:** `animation: name duration timing-function delay iteration-count direction fill-mode;`

```css
div {
  animation: example 5s linear 2s infinite alternate;
}
```

## 3. Difference

*   **Transitions:** Simple changes from state A to state B. Triggered by an action (hover, focus, class change).
*   **Animations:** Complex sequences (A -> B -> C -> D). Can run automatically, loop, and have fine-grained control over intermediate steps.

[[programming/css/css]]
[[programming/css/css3]]
[[programming/javascript/vanilla/web-animations-api]]
[[programming/javascript/vanilla/animation-worklet-api]]