CSS3動畫相關屬性詳解

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

 

1、2D效果屬性

要使用這些屬性，咱們須要經過 transform ，而且，爲了保證兼容性，咱們可能還須要添加帶有瀏覽器內核前綴的屬性，好比 -webkit-transform。
一、位移屬性 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);
}

　　

二、旋轉屬性 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);
}

　

三、縮放屬性 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);
}

　　

四、傾斜屬性 skew()

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

2、3D效果屬性

3D效果就是立體效果，怎麼實現一個3D效果的動畫呢？讓咱們分步來講。
實現3D效果的，相關的屬性，不少，兼容性也不同，咱們這裏只說一些最經常使用的屬性和使用方法。
咱們在這裏簡單分爲三步，第一步是立體環境，第二步是項目的動做或者說操做，第三部則是完成這些動做的規律，好比說時間，速度等。這些綜合起來，就是一個3D效果的動畫。

一、跟2D動畫不一樣的是，咱們須要在外層元素上添加這兩個屬性（環境）：

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

二、實現一個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()

咱們簡單先來看一下效果

三、一個動畫，咱們怎麼設置它的啓動方式，動畫效果怎麼樣，是快是慢，勻速仍是其餘，何時啓動。咱們通常都經過 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);
}

　　

3、關鍵幀動畫

實際項目中，僅僅是上面的那些知識，是不能知足咱們對動畫效果的要求的，還有個關鍵的知識點就是關鍵幀動畫。
什麼是關鍵幀動畫，你能夠理解爲，咱們能夠經過這個對一個動畫的過程的每一部分的表現都作出要求。

一個關鍵幀動畫，最少包含兩部分，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>