EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

@keyframes rule

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

CSS Animations Module Level 3, Section 2

Syntax

@keyframes <identifier> { <keyframes_blocks> };

Parameters

identifier

The name of the animation.

keyframes_blocks

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

Standards information

Remarks

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.

To learn more about Cascading Style Sheets (CSS) animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.

Examples

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>
<html>
<head>
<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;
}
</style>
<body>
   <div class="TransformDemoDiv TransformDemoDivFadeOutInOutSwirl">Hover over or tap to trigger animation.</div>
</body>
</html>


See also

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

 

 

Afficher:
© 2014 Microsoft