> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/part-7-transitions/7.0-transitions.md).

# 7.0: Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. Animations that involve transitioning between two states are often called *implicit transitions* as the states in between the start and final states are implicitly defined by the browser. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.

The transition property is a shorthand property used to represent up to four transition-related longhand properties:

```
.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
```

## CSS Transition Properties

The following table lists all the CSS transition properties:

| Property                   | Description                                                                              |
| -------------------------- | ---------------------------------------------------------------------------------------- |
| transition                 | A shorthand property for setting the four transition properties into  a single property. |
| transition-delay           | Specifies a delay (in seconds) for the transition effect.                                |
| transition-duration        | Specifies how many seconds or milliseconds a transition      effect takes to complete.   |
| transition-property        | Specifies the name of the CSS property the transition        effect is for.              |
| transition-timing-function | Specifies the speed curve of the transition effect.                                      |

### RESOURCES

```
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/
https://www.w3schools.com/css/css3_transitions.asp
https://learn.shayhowe.com/advanced-html-css/transitions-animations/
```