CSS Animations | Codeblox

@keyframes

@keyframes name {
from { styles }
to { styles }
}

Another Example:
@keyframes identifier {
0% {
    top: 0;
    left: 0;
}
30% {
    top: 50px;
}
68%,
72% {
    left: 50px;
}
100% {
    top: 100px;
    left: 100%;
    }
}

To change styles from one to another. Use from and to, or percentages to define styles at different time stamps.

animation-duration

animation-duration: 3s;

Time it takes to execute an animation.

animation-iteration-count

animation-iteration-count: infinite // 2;

Sets how many times an animation should be played before stopping.

animation

animation: animation properties;
animation: name 5s linear infinite alternate;

Shorthand for all different css animation properties.

animation-timing-function

animation-timing-function: linear;

Values:
linear                // animates at even speed  
ease                  // speeds up in middle slows down at end   
ease-in               // slow start 
ease-out              // slow end 
ease-in-out           // slow start and end
steps(4, jump-start)  // displays in stops 
cubic-bezier(p1, p2, p3, p4) // uses cubic-bezier-curve

Sets how an animation progresses through the duration of each cycle.

animation-direction

animation-direction: normal;

Values:
normal            // plays forward 
reverse           // plays backwards
alternate         // reverses direction after cycle  
alternate-reverse // same but backwards

To change the direction of an animation.

animation-name

animation-name: keyframe names;

To apply an animation to an element.

animation-delay

animation-delay: 2s;

Sets a delay before starting an animation.

animation-fill-mode

animation-fill-mode: none;

Values:
none      // 
forwards  //
backwards //
both      //

Sets how an animation applies styles before and before it animates.

animation-play-state

animation-play-state: paused;

Values:
paused  // animation currently paused
running // animation currently running

Sets whether an animation is paused or running.