CSS3動畫相關屬性詳解

本文轉載於：《https://blog.csdn.net/lyznice/article/details/54575905》

 

一、2D效果屬性

要使用這些屬性，我們需要通過 transform ，並且，為了保證兼容性，我們可能還需要添加帶有瀏覽器內核前綴的屬性，比如 -webkit-transform。
1、位移屬性 translate( x , y )

簡單來說，我們可以認為項目處於一個XY坐標軸的原點，translate( x , y )，當x為正的時候，則項目水平（x軸）向右移動[x]距離；負則向左移動[x]距離。y為正的時候，則項目垂直（y軸）向下移動[y]，反之向上移動。
當然，我們也可以把該屬性，拆分為translateX(n)，和translateY(n)，原理相同，不過一般我們還是推薦綜合的寫法。

代碼片段

.box01{
    background: rgba(7,204,63,0.9);
}
.box02{
    background: rgba(7,204,63,0.6);
    transform: translate(100px,100px);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(-100px,-100px);
}
.box04{
    background: rgba(7,204,63,0.3);
    transform: translateX(-300px);
}

　　

2、旋轉屬性 rotate()

這個屬性也很簡單，比如rotate( n deg)，n是數字，deg是單位，我們可以理解為角度，0deg則不旋轉。n為正時，順時針旋轉n度，反之，逆時針旋轉。
而rotateX和rotateY屬性，則可以歸納如3D立體效果的范疇，我們在下面再說。

.box01{
    background: rgba(7,204,63,0.6);
    transform: translate(-200px,0) rotate(-90deg);
}
.box02{
    background: rgba(7,204,63,0.9);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(200px,0) rotate(45deg);
}

　

3、縮放屬性 scale()

scale( x , y )，width為原有的值的 x 倍，height為原有的值的 y 倍。

.box01{
    background: rgba(7,204,63,0.9);
}
.box02{
    background: rgba(7,204,63,0.6);
    transform: scale(1.5,0.5);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: scale(0.5,1.5);
}

　　

4、傾斜屬性 skew()

skew( x deg, y deg ) ,分別表示 X軸和 Y軸傾斜的角度。值可以為負，反方向。
該屬性也可以拆分為，skewX( ndeg )，skewY( ndeg )，對 X軸和 Y軸的傾斜角度分別描述。
就我本人而言，這個屬性我項目中很少用

二、3D效果屬性

3D效果就是立體效果，怎么實現一個3D效果的動畫呢？讓我們分步來說。
實現3D效果的，相關的屬性，很多，兼容性也不一樣，我們這里只說一些最常用的屬性和使用方法。
我們在這里簡單分為三步，第一步是立體環境，第二步是項目的動作或者說操作，第三部則是完成這些動作的規律，比如說時間，速度等。這些綜合起來，就是一個3D效果的動畫。

1、跟2D動畫不同的是，我們需要在外層元素上添加這兩個屬性（環境）：

1） transform-style：flat / preserve-3d 默認前一個，但是3D效果需要我們在整個動畫的最外層元素，設置后一個屬性值。
2） perspective：none / px 這個屬性可以理解為視距，如果把屏幕當作空間，我們做的這個3D效果距離視圖的距離，默認為none（那就不要用了），或者是像素值，如1000px。

2、實現一個3D動畫，在2D相關屬性使用的基礎上，我們還經常用的這幾個（動作）：

1） 3D旋轉 rotateX( deg ) rotateY( deg ) rotateZ( deg ) ，deg為旋轉角度，單位deg，繞XYZ軸旋轉的情況，來設定rotateX/Y/Z。
2） 3D偏移 translateZ() translate在2D動畫中是偏移，在3D中同樣也是如此，只是，在3D效果中我們增加了一個Z軸偏移。
3）3D縮放 scale3d(x,y,z) 也可以分開寫，如scaleZ()

我們簡單先來看一下效果

3、一個動畫，我們怎么設置它的啟動方式，動畫效果怎么樣，是快是慢，勻速還是其他，什么時候啟動。我們一般都通過 transition 這個過渡屬性來設置，當然，2D動畫也可以用這個屬性。

這個屬性可以拆分為：
transition-property（過渡的屬性的名稱）。
transition-duration（定義過渡效果花費的時間,默認是 0）。
transition-timing-function:linear(勻速) ease(慢速開始，然后變快，然后慢速結束)（規定過渡效果的時間曲線，最常用的是這兩個）。
transition-delay（規定過渡效果何時開始。默認是 0）。
當然，一般情況下，我們都是寫一起的，比如：transition： width 2s ease 1s 。

綜合上面三點下面附上一個簡單demo的代碼

<div class="box">
    <div class="box01">translateZ(-50px)</div>
    <div class="box02">rotateX(360deg)</div>
    <div class="box03">rotateY(360deg)</div>
</div>

　　

.box{
    height: 300px;
    width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    border: 2px solid green;
    position: relative;
    transform-style:preserve-3d;
    perspective:1000px;
}
.box div{
    height: 150px;
    width: 150px;
    float: left;
    margin-right: 30px;
    position: relative;
}
.box01{
    background: rgba(7,204,63,0.9);
    transition: all 3s;

}
.box02{
    background: rgba(7,204,63,0.6);
    transition: all 3s;
}
.box03{
    background: rgba(7,204,63,0.6);
    transition: all 3s
}
.box01:hover{
    transform: translateZ(-50px);
}
.box02:hover{
    transform: rotateX(360deg);

}
.box03:hover{
    ;
    transform: rotateY(360deg);
}

　　

三、關鍵幀動畫

實際項目中，僅僅是上面的那些知識，是不能滿足我們對動畫效果的要求的，還有個關鍵的知識點就是關鍵幀動畫。
什么是關鍵幀動畫，你可以理解為，我們可以通過這個對一個動畫的過程的每一部分的表現都做出要求。

一個關鍵幀動畫，最少包含兩部分，animation 屬性及屬性值（動畫的名稱和運行方式運行時間等）。@keyframes（規定動畫的具體實現過程）

animation 屬性可以拆分為（當然，我們一般都寫一起）
1）animation-name 規定@keyframes 動畫的名稱。
2）animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
3）animation-timing-function 規定動畫的速度曲線。默認是 “ease”，常用的還有linear，同transtion 。
4）animation-delay 規定動畫何時開始。默認是 0。
5）animation-iteration-count 規定動畫被播放的次數。默認是 1，但我們一般用infinite，一直播放。

而@keyframes的使用方法，可以是from->to（等同於0%和100%），也可以是從0%->100%之間任意個的分層設置。我們通過下面一個稍微復雜點的demo來看一下，基本上用到了上面說到的大部分知識。

eg:
   @keyframes mymove
  {
      from {top:0px;}
      to {top:200px;}
  }

等同於：

  @keyframes mymove
  { 
     0%   {top:0px;}
     25%  {top:200px;}
     50%  {top:100px;}
     75%  {top:200px;}
     100% {top:0px;}
  }

　　

雙重立方體旋轉

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background: #9CC;
    perspective:1000px;
}
.box{
    height:200px;
    width: 200px;
    position: relative;
    margin:200px auto;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform:rotateX(20deg) rotateY(20deg);
    animation:one 5s linear infinite;
    -webkit-animation:one 5s linear infinite;
}
@keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
@-webkit-keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
.box div{
    width:200px;
    height: 200px;
    background: black;
    opacity: 0.3;
    position: absolute;
    top:0;
    left:0;
    border: 1px solid white;
    transition:all 2s;
}
.box span{
    width: 100px;
    height: 100px;
    background: orange;
    position:absolute;
    border: 1px solid white;
    top:50%;
    left:50%;
    opacity: 0.7;
    margin-top: -50px;
    margin-left: -50px;
    font-size: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
}
.box div:nth-child(1){
    transform:translateZ(100px);

}
.box div:nth-child(2){
    transform:translateZ(-100px);

}
.box div:nth-child(3){

    transform:rotateX(90deg) translateZ(100px);

}
.box div:nth-child(4){
    transform:rotateX(90deg) translateZ(-100px);

}
.box div:nth-child(5){
    transform:rotateY(90deg) translateZ(100px);

}
.box div:nth-child(6){
    transform:rotateY(90deg) translateZ(-100px);

}
.box:hover div:nth-child(1){
    transform:translateZ(200px);
}
.box:hover div:nth-child(2){
    transform:translateZ(-200px);

}
.box:hover div:nth-child(3){

    transform:rotateX(90deg) translateZ(200px);

}
.box:hover div:nth-child(4){
    transform:rotateX(90deg) translateZ(-200px);

}
.box:hover div:nth-child(5){
    transform:rotateY(90deg) translateZ(200px);

}
.box:hover div:nth-child(6){
    transform:rotateY(90deg) translateZ(-200px);

}
.box span:nth-child(7){
    transform:translateZ(50px);

}
.box span:nth-child(8){
    transform:translateZ(-50px) rotateY(180deg);

}
.box span:nth-child(9){
    transform:rotateX(90deg) translateZ(50px);

}
.box span:nth-child(10){
     transform:rotateX(90deg) translateZ(-50px);

}
.box span:nth-child(11){
    transform:rotateY(90deg) translateZ(50px);

}
.box span:nth-child(12){
     transform:rotateY(270deg) translateZ(50px);
}

</style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span>1</span>
    <span>6</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>2</span>
</div>


</body>
</html>