CSS Animations

List of animatible CSS properties

Keyframe rule

@keyframe<animation-name>{
keyframe selector { css styles }
}

rotate(), animation-play-state

translate()

animation-timing-function

ease

ease-in-out

ease-in

ease-out

ease-linear

cubic-benzier

steps

animation-delay

0s

.5s

1s

animation-fill-mode

forwards

backwards

forwards,backwards

DON'T WALK

WALK

animation-direction

animation-shortcut

div{
animation-name: spin;
animation-duration: .5s;
animation-timing-function: ease-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}

div{
animation: spin .5s ease-out 1s infinite normal none running;
}

CSS Variables

Curved animation path