CSS3中的變形與動畫詳細說明

　　最近在學習製作行動端的頁面，做了一個微信頁面的小demo，其中用到了很多的CSS3新增的內容，其中就有CSS3新增的變形和動畫。其實這種CSS3的動畫效果用JS也可以實現，不過CSS3能開啟硬體加速，效能更好。

 　　（以下均沒寫瀏覽器前綴，如有需要請自行添加~~）

CSS3常見的動畫效果的實現，其實主要是靠 transition和 animation 。 而通常，這兩個又會和CSS3中的新屬性 transform 來搭配使用

那麼這三個東西其實是做什麼用的呢？我照我自己的理解下個簡單結論。

transform：把元素變形；

transition：當元素的屬性改變時，給他一個過渡的動畫效果；

animation：做複雜動畫。

下面來詳細地說一下。

首先要說的是transform的語法：　　

transform:none | transform-functions ;

none是他的預設值，後面的transform-functions指的是變形函數;

變形函數分成兩種：2D和3D；// 相關語法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查詢

---

##其中2D的包括：（變形的以元素中心為基準，即X軸和Y軸的50%處）

　　translate()    //包括translateX() 和translateY(); 作用：依照XOY座標來移動元素（X方向右邊為正，Y方向下邊為正）；

---

　　scale()　　    //包含scaleX() 和scaleY(); 作用：放大或縮小元素；

　　rotate() 　　 //  作用：旋轉元素;　　skew() 　　  // 包括skewX() 和skewY(); 作用：讓元素傾斜。 而3D的就多了Z軸，相關文法可以在W3C查到，這裡重點推薦張鑫旭大神寫的一篇文章（http://www.zhangxinxu.com/ wordpress/2012/09/css3-3d-transform-perspective-animate-transition/） ，對於變形的講解通俗易懂。對於文章裡面說到的語法可以搭配後面這個模擬器來配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html )

###　　我來總結幾個點：1 、進行3D變形時，變形的元素外面要先包兩層標籤一個作為舞台，一個作為容器。 ###

舞台
    容器
        元素
        元素
        ...

###　　//我個人的理解是,如果舞台上的元素被當做一個整體來看待的話,可以只加一層標籤,即把舞台看作容器###

舞台(容器)
    元素
    元素
    ...

###　　2、在舞台的CSS上，設定 perspective （視距），意思是假設人離舞台的距離。在容器的CSS上設定 transform-style: preserve-3d 開啟3D###視圖###，讓容器的子元素在3D空間中呈現。 //如果把舞台當容器的話,perspective 和 transform-style 就寫在一起。 ######### 那麼，是不是變形的基點只能是元素的中心呢？不是的。 transform-origin屬性可以改變變形的基點。 ###### transform-origin的關鍵字一般的就###top### / ###bottom### / left / ###right### / center / top left / top right 之類的啦大家都熟，其中的某些單一關鍵字其實是簡寫，例如top = top center = center top ; #########接著就是過渡動畫transition。 ######觸發條件是###:hover### / ###:focus### / ###:active### / :checked / JS中的###事件### # ##

语法： transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数（动画的速度控制） 、 开始的延迟时间

指定过渡的CSS属性：all / 指定样式 / none （若省略不写，则为 all ，none一般用于清空动画）

过渡所需时间：单位s / ms （默认为0）

过渡的函数： ease（由快到慢 默认值） / linear（匀速） / ease-in（加速） / ease-out（减速） / ease-in-out（先加速后减速）/ cubic-bezier（三次贝塞尔曲线）

延迟时间：单位s / ms （默认为0）

（写transition的时候，先写 动画时间 ， 再写延迟时间）

---

举个例子吧，博雅今年秋招的笔试题：

　　用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);}

贼简单吧~ 这里有几个细节，第一个就是 transition 是放在元素上，而不是 active 上，如果放在active上，就没有回去的动作了，大家可以试一下。

　　　　　　　　　　　　　　　　第二个就是，transform多个属性的时候，中间用空格来隔开，如果用逗号的话就没反应了。

但如果我在 :active 上加上 transition，

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}

这样按住的时候，就会执行 active 里面的transition，也就是去的时候用时 2s ，加速运动；而回来的时候执行 p 里的transition ，用时1s 减速运动。

---

最后就到 animation 了~ animation也是做动画的，不过功能比 transition 更加强大，因为animation可以控制动画的每一步，而transition只能控制开头和结尾。

语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式（函数） 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ；

关键帧动画名字：就是你要执行的动画的名字，这里要先知道关键帧的语法

@keyframes name{
     0%{
       ...       
    }   
    50%{
       ...
    }
    100%{
       ...
    }  
}

这里的关键帧的名字就是name ，然后百分比的就是动画的进度，可以根据需要设置不同的百分比，再设置不同的动画。

动画时间：和transition一样~

动画播放方式（函数）：和transition的过渡的函数一样~

延迟时间：和transition一样~

循环次数：动画播放的次数，默认为1，通常为整数，如果为 infinite，则无限次地播放；

播放方向：默认为normal，就是正常地向前播放，还有一个值是 alternate ，就是先正向播放，再反向播放，不断地交替；

播放状态：running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;

动画时间外的属性: none(默认) 、 forwards 、 backwards 、both；

　　举个例子吧：

@keyframes color{
    0%{ background:yellow}
    100%{ background:blue}
}
p{ background:black}

　　none：　　　　动画开始前：黑  ； 动画结束后：黑

　　forwards：　　动画开始前：黑 ； 动画结束后：蓝

　　backwards：　动画开始之前：黄 ； 动画结束后：黑

　　both：　　　　动画开始前：黄 ； 动画结束后：蓝

就是这么简单~

---

最后，说一下这三个属性在JS中的写法：

transform：

obj.style.transform = "translateX(100px) scale(2)";
obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀

transition：

obj.style.transition = "1s";
obj.style.webKitTransition = "1s";//带浏览器前缀

animation：

obj.style.animation = "name 1s ";//1、关键帧先在css写好；2、兼容写法在关键帧里面写；

以上是CSS3中的變形與動畫詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！