transform，transition，animation的混合使用——進階

今天咱們來說述css3可以作成動畫的最小獨立單元,而且講述如何使用這些獨立的單元來構成一個‘高大尚’的組合動畫。

這是我在網上找的一個案例，修改後的效果圖，雖然說不是特別的‘高大尚’，但我認爲這也跟高大尚佔了一點了，中間的菜單按鈕就是咱們在作responsive開發時會用的到的效果，這是一個六邊形的菜單，每一個正三邊形中的鼠標滑過出現的文字效果也是咱們常見到的產品推薦的鼠標滑過的一種形式。
稍後，我也會介紹如何一步一步的作出這樣高端大氣的css動畫。

組合動畫效果

‘萬丈高樓平地起’，‘千里之行，始於足下’，成功沒有捷徑，因此，我就在廢話一下，來說一講我對css動畫的理解，以及我本身造成的一套關於寫css動畫的方案。

首先，咱們來說一講構成動畫的最小獨立單元的分類

1.transform2d或者transform3d（這類動畫必需要事件觸發）
2.animation
3.transition (這類動畫必需要事件觸發)

tranform2d，transform3d

transform是變形動畫，2d類的動畫沿着x軸和y軸的變化，3d動畫僅x值的變化使得動畫在yz所造成的平面內的變化，僅y值的變化使得動畫在xz所造成的平面內的變化，僅z值的變化使得動畫在xy所造成的平面內的變化，若是是x,y值同時變化，則造成的是在x軸上的變化，若是是x,z值同時變化，則造成的是在y軸上的變化，若是是y,z值同時變化，則造成的是在x軸上的變化，若是是x,y,z的值都變化，則造成的是關於空間中的一點上（0,0,0）作變化。

transiton

這個是一個在執行的過程當中聲明關鍵幀的動畫，能夠一旦元素的屬性發生變化就能夠造成一個動畫，而後transition-property，transition-duration，transition-timing-function，transition-delay來設置動畫的屬性

animation

經過@keyframes 來設置關鍵幀，在沒個關鍵幀中設置在該幀動畫中某個元素的一個或幾個屬性的變化。animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction來設置動畫的屬性

這些內容作過css動畫的人都有必定的理解，這個也不須要我來贅述，已經很熟悉的同窗能夠略過，不深瞭解的同窗還請在看這篇文章以前打好基礎。

首先，咱們來一塊兒學習一下按鈕的動畫效果，

menu動畫效果

這裏用的是css3的僞類：hover，對於有一段時間開發經驗的同窗來講，改成用用click事件來實現就簡單多了，下面送上我寫的代碼：

html代碼以下：

<div class="menu-outer">
    <span class="menu"></span>
</div>複製代碼

css代碼以下（css3瀏覽器兼容性不考慮）：

.menu-outer {
  position: relative;
  display: inline-block;
  margin: 30px;
  width: 20px;
  height: 24px;
  cursor: pointer;
}
.menu-outer:hover .menu {
  background-color: transparent;
}
.menu-outer:hover .menu::before {
  transform: translateY(8px) rotate(45deg);
}
.menu-outer:hover .menu::after {
  transform: translateY(-8px) rotate(-45deg);
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  transform: translate(-50%, -50%);
  background-clip: content-box;
  background-color: #585247;
}
.menu::after, .menu::before {
  position: absolute;
  left: 0;
  display: inline-block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #585247;
  transition: transform 0.3s, background-color 0.3s;
}
.menu::before {
  top: 0;
}
.menu::after {
  bottom: 0;
}複製代碼

其次，來看看菜單選項的鼠標移入動畫，這種動畫在鼠標移入後背景透明的發生變化，背景顏色變黑，文字會由左邊切入，而且帶有彈性碰撞效果，這種效果，咱們在不少場合見到，好比說，產品欄目中……

產品介紹效果的動畫

html代碼

<div class="mouse-in">
    <a href="javascript:;"> <img src="./img/l-logo.jpg" alt="logo"> <h2 class="l-logo">logo</h2> <p>源自世界的logo</p> </a> </div>複製代碼

css代碼（css3瀏覽器兼容性不考慮）：

.mouse-in {
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 160px;
    margin: 60px;
    border-radius: 10%;
    perspective: 500px;
    transform-origin: 0 0;
    transition: background-color 0.3s;
}

.mouse-in img {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}

.mouse-in h2,
.mouse-in p {
    position: absolute;
    padding: 0 16px;
    color: #fff;
    opacity: 0;
    transform: translate3d(-160px, 0, -160px);
}

.mouse-in h2 {
    bottom: 50%;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
    transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}

.mouse-in p {
    top: 50%;
    font-size: 14px;
    transition: transform 0.3s 0.1s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.1s;
}

.mouse-in:hover {
    background: #000;
}

.mouse-in:hover h2,
.mouse-in:hover p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.mouse-in:hover img {
    opacity: 0.4;
}複製代碼

等邊三角形（非動畫）要顯示一個正三邊形，個人方法是將一個長方形扭曲爲一個正菱形，以菱形的左上角爲原點進行旋轉，能夠獲得一個旋轉30度後的菱形，而後在菱形中添加一個長方形寬度爲菱形的邊長，高度爲菱形的中垂線高度，而後逆時針旋轉60deg便可，再而後在這個長方形內添加一張圖片便可，最後設置菱形的overflow屬性爲hidden，便可看到一個正三邊形

HTML代碼：

<div class="l-box">
    <div class="regular-triangle"> <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> </a> </div> </div> </div>複製代碼

css代碼：

.l-box {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  margin: 150px;
}

.regular-triangle {
  position: relative;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 129.90381px;
  height: 150px;
  transform-origin: 0 100%;
  transform: skewY(-30deg);
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 86.60254%;
  transform-origin: 0 0;
  transform: skewY(30deg) rotate(30deg);
}

.clip img {
  width: 150px;
  height: 150px;
}複製代碼

用六個正三邊形組成一個正六邊形，而後將正三邊形以此旋轉0，60,120,180,240,300deg,便可獲得以下圖形

<div class="l-box l-list">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>1</span> </a> </div> </div>

    <div class="l-list-item regular-triangle">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>2</span> </a> </div> </div>

    <div class="l-list-item regular-triangle">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>3</span> </a> </div> </div>

    <div class="l-list-item regular-triangle">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>4</span> </a> </div> </div>

    <div class="l-list-item regular-triangle">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>5</span> </a> </div> </div>

    <div class="l-list-item regular-triangle">
        <div class="clip"> <a href="#"> <img src="./img/bg.jpg" alt="bg"> <span>6</span> </a> </div> </div>

</div>複製代碼

css代碼：

.l-list-item:nth-child(1){
    transform: rotate(0) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(2){
    transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(3){
    transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(4){
    transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(5){
    transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(6){
    transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
}複製代碼

正六邊形

除了以上稍微複雜的transition，transform，animation的組合動畫，還有一種是svg smil(同步多媒體集成語言) animation動畫,下面咱們舉其中的路徑動畫(路徑動畫這種形式是css3動畫所不具備的)，效果圖以下。

svg動畫

html代碼以下：

<svg viewbox="0 0 100 100" width="50" height="50">
    <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="transparent" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300" /> </svg>複製代碼

css代碼以下：

svg{
    margin: 150px;
}
svg polygon:hover{
    animation: svgHover 0.7s;
    cursor: pointer;
}

@keyframes svgHover {
    0% {
        stroke-dasharray: 0, 0, 300;
    }
    10% {
        stroke-dasharray: 0, 20, 300;
    }
    100% {
        stroke-dasharray: 300, 20, 300;
    }
}複製代碼

svg動畫想必咱們看過的不少如iconfont網站首頁笑臉動畫，以及背景的流星動畫，還有紙飛機動畫。

導航動畫

導航動畫

演示地址：lvzhenbang.github.io/css3-animat…

web前端添加了動畫後，咱們會發現咱們所作的頁面瞬間就增色很多。後續文章敬請期待！

本文的源代碼和其餘一些動畫案例下載地址github.com/lvzhenbang/…，若是喜歡就爲我添加一個星星，多多關注我一下