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

源自世界發表於2017-05-16
ORM

今天我們來講述css3能夠做成動畫的最小獨立單元,並且講述如何使用這些獨立的單元來構成一個‘高大尚’的組合動畫。

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

transform，transition，animation的混合使用——進階
組合動畫效果

‘萬丈高樓平地起’，‘千里之行，始於足下’，成功沒有捷徑，所以，我就在廢話一下，來講一講我對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動畫的人都有一定的理解，這個也不需要我來贅述，已經很熟悉的同學可以略過，不深瞭解的同學還請在看這篇文章之前打好基礎。

首先，我們來一起學習一下按鈕的動畫效果，

transform，transition，animation的混合使用——進階
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;
}複製程式碼

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

transform，transition，animation的混合使用——進階
產品介紹效果的動畫

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%);
}複製程式碼

transform，transition，animation的混合使用——進階
正六邊形

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

transform，transition，animation的混合使用——進階
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網站首頁笑臉動畫，以及背景的流星動畫，還有紙飛機動畫。

導航動畫

transform，transition，animation的混合使用——進階
導航動畫

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

web前端新增了動畫後，我們會發現我們所做的頁面瞬間就增色不少。後續文章敬請期待！

本文的原始碼和其他一些動畫案例下載地址github.com/lvzhenbang/…，如果喜歡就為我新增一個星星，多多關注我一下

相關文章