animation keyframe animation grammar

The basic declaration and usage

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

For simplicity, the rest of the code on this page will not use any prefix, but the actual use of the prefix should be used above all suppliers.

More steps

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}
#box {
   animation: fontbulger 2s infinite;
}

If the animation start and end with the same property, the method is to partition the 0% and 100% by commas:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Or, you can always tell the animation runs twice (or any even number of times) and tell alternating direction.

Call keyframe animation have separate properties:

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

Animated short

Just all individual values ​​separated by a space. Order does not matter, in addition to using both duration and delay they must remain in that order. In the following example, the duration = lS, 2S = delay = 3 iteration.

animation: test 1s 2s 3 alternate backwards;

Combined deformation and animation

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}　

Multiple animations

You can use a comma-separated values ​​to declare multiple animations on the selector.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

steps()

Steps () function can be precisely controlled within a range of how many times the animation keyframes rendered. Suppose you declare:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

If step (10) in the animation, key frames will ensure 10 occurs only within the allotted time.

.move {
  animation: move 10s steps(10) infinite alternate;
}

There is great need for mathematical calculations. Every second, this element will move to the left 10px, 10px is moved downward, until the end of the animation, and then reversed.

For spritesheet animation, a demonstration like this done by simurai, this may be great.