????此處總結動畫及私有前綴。
（一）動畫
????動畫需要先定義，再調(diào)用。
1.定義動畫
1）連續(xù)動畫的定義
@keyframes 動畫名字 {
? ? ? ? from {
? ? ? ? ? ? //動畫開始之前的狀態(tài)
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? //動畫結局的狀態(tài)
? ? ? ? }
? ? }
2）分步多狀態(tài)動畫的定義
? ? @keyframes 動畫名字 {??
? ? ? ? 0% {
? ? ? ? ? ? 開始狀態(tài)
? ? ? ? }
? ? ? ? 50%{
? ? ? ? ? ? 中間狀態(tài)
? ? ? ? }
? ? ? ? 100% {
? ? ? ? ? ? 結束狀態(tài)
? ? ? ? }
? ? }
2.調(diào)用動畫
語法 => animation: 動畫名稱 動畫時長 其他屬性值；
????誰用動畫就給誰加調(diào)用。動畫名稱及動畫時長必須有，其他屬性值隨意且順序也隨意。
將上表做一個分析解釋：
????動畫的名字 animation-name: dh；
? ? 動畫的時間 animation-duration: 5s；
? ? 動畫速度曲線（勻速或其他） animation-timing-function: linear勻速； 默認ease表示緩沖；steps（5）按步分5次走
? ? 動畫延遲多久后執(zhí)行 animation-delat: 3s； 默認為0s
? ? 動畫播放次數(shù) animation-iteration-count: 2； 無限次為infinite
? ? 動畫是否逆向播放 animation-direction: alternate； 默認normal
? ? 動畫暫停 animation-play-state: paused； 默認running運動
? ? 動畫結束后的狀態(tài) animation-fill-mode: forwards保持當前狀態(tài)；backwords回到起始狀態(tài)
代碼舉栗：
<!-- 3D自動輪播圖，鼠標放上的時候暫停輪播 -->
<style>
? ? body {
? ? ? ? /* 設置透視 */
? ? ? ? perspective: 600px;
? ? }
? ? /* 用父盒子包裹3D立方體 */
? ? .box {
? ? ? ? width: 700px;
? ? ? ? height: 300px;
? ? ? ? margin: 100px auto;
? ? ? ? position: relative;
? ? ? ? transform-origin: center;
? ? ? ? transform-style: preserve-3d;
? ? ? ? /* 動畫名為dh，總時長5s，無限次勻速播放 */
? ? ? ? animation: dh 5s infinite linear;
? ? }
? ? .box img {
? ? ? ? width: 700px;
? ? }
? ? .lb {
? ? ? ? position: absolute;
? ? }
? ? .lb:nth-child(1) {
? ? ? ? /* 沿Z方向的位移設置成輪播圖圖片width的一半 */
? ? ? ? transform: rotateY(90deg) translateZ(350px);
? ? }
? ? .lb:nth-child(2) {
? ? ? ? transform: rotateY(-90deg) translateZ(350px);
? ? }
? ? .lb:nth-child(3) {
? ? ? ? transform: rotateY(0deg) translateZ(350px);
? ? }
? ? .lb:nth-child(4) {
? ? ? ? transform: rotateY(180deg) translateZ(350px);
? ? }
? ? @keyframes dh {
? ? ? ? from {
? ? ? ? ? ? transform: translateZ(-400px) rotateY(0deg);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateZ(-400px) rotateY(360deg);
? ? ? ? }
? ? }
? ? .box:hover {
? ? ? ? /* 鼠標經(jīng)過時暫停動畫 */
? ? ? ? animation-play-state: paused;
? ? }
? ? </style>
<body>
? ? <div class="box">
? ? ? ? <div class="lb">
? ? ? ? ? ? <img src="images/lb1.png" alt="">
? ? ? ? </div>
? ? ? ? <div class="lb">
? ? ? ? ? ? <img src="images/lb2.png" alt="">
? ? ? ? </div>
? ? ? ? <div class="lb">
? ? ? ? ? ? <img src="images/lb3.png" alt="">
? ? ? ? </div>
? ? ? ? <div class="lb">
? ? ? ? ? ? <img src="images/lb4.png" alt="">
? ? ? ? </div>
? ? </div>
</body>
????敲了一下午的代碼，動畫還是掌握的不是很好。沖鴨！繼續(xù)敲～
（二）私有前綴
????瀏覽器廠商通常都是在屬性名稱前添加廠商的私有前綴，來測試這些尚未成為標準的特性。 因此，可以借助私有前綴，來解決瀏覽器對CSS3的兼容性問題。
代碼舉栗：
.box{
? ? -webkit-transition:all 1s;
? ? -moz-transition:all 1s;
? ? -ms-transition:all 1s;
? ? -o-transition:all 1s;
? ? transition:all 1s;
}
/*推薦使用 先前綴后標準 順序*/
? ? 再比如，在使用背景顏色漸變的屬性時，也要加前綴：
-webkit-background: linear-gradient(top, red, pink);
