Skip to main content
@keyframes rule

Specifies a list of property animation keyframes for an object in the HTML document.

CSS Animations Module Level 3, Section 2 Internet Explorer 10



@keyframes <identifier> { <keyframes_blocks> };



The name of the animation.


A set of keyframes blocks, each of which is composed of keyframe selectors.

Standards information


This rule has no default value.

The @keyframes specifies the property values during one cycle of an animation; the animation may iterate one or more times.

This rule uses keyframe selectors to specify property values at various stages of the animation. Keyframe selectors can be declared as "from" (equivalent to "0%"), "to" (equivalent to "100%"), and one or more percentages. If either the "from" (or "0%") or "to" (or "100%") selector is omitted, the missing keyframe is constructed using the computed values of the properties being animated.

Keyframe selectors use keyframe descriptors to specify the properties and values being animated. If a property can't be animated, the declaration is ignored.

Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) animations properties. They are supported unprefixed in Internet Explorer 10 and later.

To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.


The following example uses @keyframes to animate a pink square that fades, twirls counterclockwise, twirls again counterclockwise, and then fades back.

A pink square being rotated and faded with the @keyframes rule

You can also view a live version of this example.

<!DOCTYPE html>
<style media="screen" type="text/css">
   .TransformDemoDiv {
      background-color: #F472D0;	
      margin: 25px 25px; 
      border: 2px solid rgb(35, 35, 35); 
      width: 100px; 
      height: 100px; 
      text-align: center; 
   @keyframes fadeOutInOutSwirl {
      0% {
         opacity: 1;
      25% {
         opacity: 0.5;
         transform: rotateZ(0deg);
      75% {
         opacity: 0.5;
         transform: rotateZ(180deg);
      100% {
         opacity: 1.0;
         transform: rotateZ(360deg);
   .TransformDemoDivFadeOutInOutSwirl:hover {
      animation-duration: 2s;
      animation-name: fadeOutInOutSwirl;
   <div class="TransformDemoDiv TransformDemoDivFadeOutInOutSwirl">Hover over or tap to trigger animation.</div>

See also

How to bring your webpage to life with CSS transforms, transitions, and animations
Internet Explorer 10 Guide for Developers: CSS Animations