# Animations

CSS animations describe a **chain of transition steps**.

Each step is called a **keyframe**.

```css
@keyframes demo-animation {

    0% {
        background-color: #ffffff;
        color: #000000;
        width: 73px;
    }

    33% {
        background-color: rgb(63,81,181);
        color: #ffffff;
        width: 73px;
    }

    66% {
        background-color: rgb(63,81,181);
        color: #ffffff;
        width: 173px;
    }

    100% {
        background-color: #ffffff;
        color: #000000;
        width: 173px;
    }

}

.wt-demo-animation {
  
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: 73px;
    margin: auto;
    padding: 10px;
  
}

.wt-demo-animation:hover {

    animation-name: demo-animation;
    animation-direction: alternate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
```

<https://codepen.io/younes-jaaidi/pen/eLVybG>

{% embed url="<https://codepen.io/younes-jaaidi/pen/eLVybG>" %}

## Animate.css

The **animate.css** module implements lots of interesting animations.

<https://daneden.github.io/animate.css/>

{% embed url="<https://daneden.github.io/animate.css/>" %}

[<br>](https://daneden.github.io/animate.css/)