---
title: Using CSS Animations
---
## Using CSS Animations
CSS animations change elements from one CSS style to another.
There are no limits to how many CSS propreties you can change.
## @Keyframes
CSS animations work by using keyframes, which define what style the element has at any given time.
```css
/* Using from/to */
@keyframes animationName {
from {opacity: 1;}
to {opacity: 0;}
}
/* Using Values */
@keyframes animationName {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
```
To create a CSS animation sequence, we have different sub-properties in the `animation` property in CSS :
- `animation-delay`
- `animation-direction`
- `animation-duration`
- `animation-iteration-count`
- `animation-name`
- `animation-play-state`
- `animation-timing-function`
- `animation-fill-mode`
### Sample CSS animation sequence for move text across the screen
In the HTML part we will have a `div` with class `container` and a `h3` with the text `Hello World`:
```html