What properties does css3 animation have?

css3 animation attributes include: "@keyframes", animation, animation-name, animation-duration, animation-delay, animation-direction, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 animation properties:

• @keyframes specifies animation.

• animation Shorthand property for all animation properties, except the animation-play-state property.

• animation-name specifies the name of the @keyframes animation.

• animation-duration specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.

• animation-timing-function specifies the speed curve of animation. The default is "ease".

• animation-delay specifies when the animation starts. The default is 0.

• animation-iteration-count specifies the number of times the animation is played. The default is 1.

• animation-direction specifies whether the animation plays in reverse in the next cycle. The default is "normal".

• animation-play-state specifies whether the animation is running or paused. The default is "running".

• animation-fill-mode specifies the state of the object outside of the animation time.

Example: Use css3 animation properties to create simple animations

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3. Running effect

(Learning video sharing: css video tutorial)

The above is the detailed content of What properties does css3 animation have?. For more information, please follow other related articles on the PHP Chinese website!