What properties does css3 animation have?-Front-end Q&A-php.cn

What properties does css3 animation have?

青灯夜游

Release： 2023-01-04 09:35:25

Original

3181 people have browsed it

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

What properties does css3 animation have?

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: &#39;Helvetica Neue&#39;, 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;
  }
}

Copy after login

3. Running effect

What properties does css3 animation have?

(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!