css3動(dòng)畫屬性有：“@keyframes”、animation、animation-name、animation-duration、animation-delay、animation-direction等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3動(dòng)畫屬性：

• @keyframes 規(guī)定動(dòng)畫。

• animation 所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。

• animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。

• animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。

• animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。

• animation-delay 規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。

• animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。

• animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。

• animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。

• animation-fill-mode 規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。

示例：使用css3動(dòng)畫屬性制作簡(jiǎn)單動(dòng)畫

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、運(yùn)行效果

（學(xué)習(xí)視頻分享：css視頻教程）

以上是css3動(dòng)畫有哪些屬性的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！