這篇“css3如何實現(xiàn)動畫”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css3如何實現(xiàn)動畫”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、鎮(zhèn)安網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為鎮(zhèn)安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

這是一個考驗面試者對css的基礎(chǔ)知識。

css 實現(xiàn)動畫主要有3種方式

第一種是： transition 實現(xiàn)漸變動畫

第二種是： transform 轉(zhuǎn)變動畫

第三種是： animation 實現(xiàn)自定義動畫

下面具體講一下3種動畫的實現(xiàn)方式。

transition漸變動畫

我們先看一下 transition 的屬性：

• property:填寫需要變化的css屬性如：width,line-height,font-size,color等,所有作用與dom樣式的屬性;

• duration:完成過渡效果需要的時間單位(s或者ms)

• timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）
   

timing-function具體的值可以看下面的表格：

值	描述
linear	勻速（等于 cubic-bezier(0,0,1,1)）
ease	從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	慢慢變快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	慢慢變慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），漸顯漸隱效果
cubic-bezier( n , n , n , n )	在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值

• delay: 動畫效果的延遲觸發(fā)時間(單位ms或者s)

下面我們看一個完整的例子：

<div class="base"></div>

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        /*簡寫*/
        /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

運行效果：

可以看到，鼠標(biāo)移上去的時候，動畫延遲0.5s開始，并且由于 border-color 沒有設(shè)置到 transition-property 里面，所以是沒有漸變動畫的。

transform轉(zhuǎn)變動畫

transform屬性應(yīng)用于2D 或 3D轉(zhuǎn)換。該屬性允許我們能夠?qū)υ剡M(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動這四類操作.一般是配合transition的屬性一起使用。

1. none：定義不進(jìn)行任何轉(zhuǎn)換，一般用于注冊掉該轉(zhuǎn)換。

2. transform-functions：定義要進(jìn)行轉(zhuǎn)換的類型函數(shù)。主要有：

2.1 旋轉(zhuǎn)(rotate)：主要分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)。rotate(angle)，2D 旋轉(zhuǎn)，參數(shù)為角度，如45deg；rotate(x,y,z,angle)，3D旋轉(zhuǎn)，圍繞原地到(x,y,z)的直線進(jìn)行3D旋轉(zhuǎn)；rotateX(angle)，沿著X軸進(jìn)行3D旋轉(zhuǎn)；rotateY(angle)；rotateZ(angle)；

2.2 縮放(scale)：一般用于元素的大小收縮設(shè)定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。

2.3 傾斜(skew)：主要用于對元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉(zhuǎn)換；skewX(angle)，沿著x軸的2D傾斜轉(zhuǎn)換；skew(angle)，沿著y軸的2D傾斜轉(zhuǎn)換。

2.4 移動(translate)：主要用于將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)。

<h6>transition配合transform一起使用</h6>
<div class="base base2"></div>

.base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
      }

運行效果：

可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大。

animation自定義動畫

為了實現(xiàn)更靈活的動畫效果，css3還提供了自定義動畫的功能。

(1) name：需要綁定到選擇器的keyframe名稱。

(2) duration：完成該動畫需要花費的時間，秒或毫秒。

(3) timing-function：跟transition-linear一樣。

(4) delay：設(shè)置動畫在開始之前的延遲。

(5) iteration-count：設(shè)置動畫執(zhí)行的次數(shù)，infinite為無限次循環(huán)。

(6) direction：是否輪詢反向播放動畫。normal，默認(rèn)值，動畫應(yīng)該正常播放；alternate，動畫應(yīng)該輪流反向播放。

<h6 class="title">animate自定義動畫</h6>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

運行效果：

可以看到，自定義動畫能實現(xiàn)更靈活的動畫效果，包括了第一種和第二種動畫的所有功能，而且屬性也更全面。

感謝你的閱讀，希望你對“css3如何實現(xiàn)動畫”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：css3如何實現(xiàn)動畫
網(wǎng)站鏈接：http://www.chinadenli.net/article4/igpsie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App開發(fā)、、虛擬主機(jī)、網(wǎng)站改版、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)