Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS @keyframes

The @keyframes rule specifies steps (waypoints) in an animation sequence.

Each step has a different style associated with it.

Animation sequences start at 0% (from) and end at 100% (to).

Example

#

An animation using the @keyframes rule.
The from and to keywords mark the start and end of the sequence.

<style> 
  .block {
    background-color: steelblue;
    width: 90px;
    height: 90px;
    animation-name: movingAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
  
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(250%); }
  }
</style>

<div class="block"></div>  

Using @keyframes

Two keywords from and to mark the start and end points.

Alternatively, use 0% (from) and 100% (to), and any other % in between (see below).

Syntax

@keyframes animation-name {
    keyframes-selector { css-styles; }
}

Values

#

Value Description
animation-name Required. Defines the name of the animation.
keyframes-selector Required. Percentage of the animation duration.
Legal values:
0-100%
from (same as 0%)
to (same as 100%)
css-styles Required. One or more legal CSS style properties

More Examples

A 5-step @keyframes sequence.
The element changes position and color during these steps.

<style> 
  .animation-example {
    width: 100px;
    height: 100px;
    background-color: aliceblue;
    position: relative;
    animation-name: bgPositionAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes bgPositionAnimation {
     0% { background-color: lightblue; left: 0px; top: 0px; }
    25% { background-color: orangered; left: 200px; top: 0px; }
    50% { background-color: yellow; left: 200px; top: 200px; }
    75% { background-color: teal; left: 0px; top: 200px; }
   100% { background-color: lightblue; left: 0px; top: 0px; }
  }
</style>

<div class="animation-example"></div>

Browser support

This table shows when @keyframes support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides