動(dòng)畫是使元素從一種樣式逐漸變化為另外一種效果，CSS3動(dòng)畫的生成，主要依賴@keyframes定義動(dòng)畫，animation執(zhí)行動(dòng)畫。

@keyframes

通過(guò)?@keyframes?規(guī)則創(chuàng)建動(dòng)畫。

@keyframes keyframes-name {keyframes-selector {css-styles;}}
keyframes-name?幀列表的名稱。 名稱必須符合 CSS 語(yǔ)法中對(duì)標(biāo)識(shí)符的定義。
keyframes-selector?動(dòng)畫時(shí)長(zhǎng)的百分比。合法值：
0-100%
from 等效于 0%
to 等效于 100%
css-styles?需要改變的css樣式，支持多屬性

animation

animation?是一個(gè)簡(jiǎn)寫的屬性，用于設(shè)置6個(gè)動(dòng)畫屬性：

• animation-name：這個(gè)就是使用@keyframes定義的動(dòng)畫名稱；
• animation-duration：動(dòng)畫執(zhí)行的時(shí)間，以秒為單位
• animation-delay：規(guī)定動(dòng)畫開始之前的延遲
• animation-iteration-count：規(guī)定動(dòng)畫應(yīng)該播放的次數(shù),n(次數(shù)) | infinite(無(wú)限次)
• animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫
• animation-timing-function：規(guī)定動(dòng)畫的速度曲線

@keyframes changeSize {
    0% {
        transform: scale(0.8);            
    }
    50% {
        transform: scale(1.2);            
    }
    100% {
        transform: scale(0.8);            
    }
}

.demo {
    animation-name: changeSize;
    animation-duration: 2s;
    animation-iteration-count:infinite;
}

animation-timing-function

這里說(shuō)下復(fù)雜屬性，第一個(gè)是animation-timing-function：規(guī)定動(dòng)畫速度的曲線

cubic-bezier：三次賽貝爾曲線函數(shù)，前面的幾個(gè)預(yù)設(shè)函數(shù)都可以通過(guò)它來(lái)實(shí)現(xiàn)。 通過(guò)控制曲線上的四個(gè)點(diǎn)（起始點(diǎn)(0,0)、終止點(diǎn)(1,1)以及兩個(gè)相互分離的中間點(diǎn)）來(lái)繪制一條曲線并以曲線的狀態(tài)來(lái)反映動(dòng)畫過(guò)程中速度的變化?？梢栽L問(wèn)?cubic-bezier.com?來(lái)設(shè)置對(duì)應(yīng)的值。

ease?的效果等同于?cubic-bezier(.25,.01,.25,1)

linear?的效果等同于?cubic-bezier(0,0,1,1)

ease-in?的效果等同于?cubic-bezier(.42,0,1,1)

ease-out?的效果等同于?cubic-bezier(0,0,.58,1)

ease-in-out?的效果等同于?cubic-bezier(.42,0,.58,1)

@keyframes dropdown {
    0% {
        top: 0px;
    }
    100% {
        top: 420px;
    }
}

ul li{
    &:first-child{
        animation: dropdown 6s ease infinite;
    }
    &:nth-child(2){
        animation: dropdown 6s linear infinite;
    }
    &:nth-child(3){
        animation: dropdown 6s ease-in infinite;
    }
    &:nth-child(4){
        animation: dropdown 6s ease-out infinite;
    }
    &:nth-child(5){
        animation: dropdown 6s ease-in-out infinite;
    }
    &:last-child{
        animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite;
    }
}

animation-direction

animation-direction?定義是否應(yīng)該輪流反向播放動(dòng)畫，如果動(dòng)畫次數(shù)設(shè)置為一次，則無(wú)效。

我們可以把上面的案例每個(gè)都加上alternate的參數(shù)，再看下效果，是不是更贊了？

ul li{
    &:first-child{
        animation: dropdown 6s ease infinite alternate;
    }
    &:nth-child(2){
        animation: dropdown 6s linear infinite alternate;
    }
    &:nth-child(3){
        animation: dropdown 6s ease-in infinite alternate;
    }
    &:nth-child(4){
        animation: dropdown 6s ease-out infinite alternate;
    }
    &:nth-child(5){
        animation: dropdown 6s ease-in-out infinite alternate;
    }
    &:last-child{
        animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite alternate;
    }
}

?旋轉(zhuǎn)

img {
          width: 315px;
          height: 315px;
          animation: circle 10s infinite linear;
          @keyframes circle {
            from {
              transform: rotate(0);
            }

            to {
              transform: rotate(360deg);
            }
          }
        }


//
@keyframes circleAnimate {
    0%{
        opacity: .3;
    }
    100%{
        opacity: 1;
    }
  }

  .l{
        left:0;
        &::before{
            position: absolute;
            width:100%;
            height:100%;
            content: "";
            background: url(./img/l1.min.png);
            animation: circleAnimate 1s ease-in-out 0s infinite;
        }
        &::after{
            position: absolute;
            width:100%;
            height:100%;
            content: "";
            background: url(./img/l1-2.min.png);
            animation: circleAnimate 1s ease-in-out 0.5s infinite;
        }
    }

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-767094.html

到了這里，關(guān)于css3動(dòng)畫基礎(chǔ)詳解（@keyframes和animation）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！