ეს თარგმანი არასრულია. გთხოვთ, დაგვეხმაროთ სტატიის გადმოთარგმნაში ინგლისურიდან.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Summary

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

A list of CSS properties that can be animated is available; it's worth noting that these are the same properties supported by CSS transitions.

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

/* @keyframes name | duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state */
  animation: slidein 3s ease-in 1s 2 reverse both paused;

/* @keyframes name | duration | timing-function | delay */
  animation: slidein 3s linear 1s;*/

/* @keyframes name | duration */
  animation: slidein 3s;

The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.

Formal syntax

<single-animation>#

where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Examples

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations
The definition of 'animation' in that specification.
Working Draft Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 -webkit [1]
4.0 -webkit
5.0 (5.0)-moz
16.0 (16.0)
? ? iOS 2.0-webkit

[1] Partial support: animation-fill-mode property is not supported in Android browser below 2.3.

Cylon Eye

Considering all prefixes above, here is a Cylon Eye animation incorporating linear gradients and animations that works across Firefox, Chrome, Opera, and IE10:

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  color:white;
  float:left;
  margin-right:2%;            
}

.view_port {
  background-color:black;
  height:25px;
  width:100%;
  overflow: hidden;
}

.cylon_eye {
  color:white;
  height: 100%;
  width: 20%;

  background-color: red;
  background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);

  -webkit-animation: move_eye 4s linear 0s infinite alternate;
     -moz-animation: move_eye 4s linear 0s infinite alternate;
       -o-animation: move_eye 4s linear 0s infinite alternate;
          animation: move_eye 4s linear 0s infinite alternate;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

See also

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: Guillaume-Heras, teoli, Sebastianz, melomuxa
ბოლო განახლების ავტორი: Guillaume-Heras,