css3中动画有哪些属性？

通过css3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。那么在css中动画属性有哪些？

 

vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

css3动画属性：

• @keyframes：规定动画。

• animation：所有动画属性的简写属性，除了 animation-play-state 属性。

• animation-name：规定 @keyframes 动画的名称。

• animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

• animation-timing-function：规定动画的速度曲线。默认是 "ease"。

• animation-delay：规定动画何时开始。默认是 0。

• animation-iteration-count：规定动画被播放的次数。默认是 1。

• animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

• animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。

• animation-fill-mode：规定对象动画时间之外的状态。

实例：创建简单动画

html代码：

<div>
  <p>Falling Text</p>
</div>

CSS代码：

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Gentium Basic', serif;
}

.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.text {
  font-size: 3em;
  font-weight: bold;
  color: #0099cc;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: fall 4s infinite;
  animation: fall 4s infinite;
}

@-webkit-keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,
  60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,
  to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes fall {
  from, 15% {
    -webkit-transform: rotate(0) translateX(0);
    transform: rotate(0) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
    animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
  }
  50%,
  60% {
    -webkit-transform: rotate(90deg) translateX(0);
    transform: rotate(90deg) translateX(0);
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
    animation-timing-function: cubic-bezier(.13, .84, .82, 1);
  }
  85%,
  to {
    -webkit-transform: rotate(90deg) translateX(200px);
    transform: rotate(90deg) translateX(200px);
    opacity: 0;
  }
}