原文鏈接：https://blog.csdn.net/WuLex

CSS動畫可以取代js動畫在移動端會更加流暢！

下面是一個的繪製太陽系各大行星運行軌跡筆記，可以自學參考！

首先我們需要創建一個@keyframes規則

@keyframes name{
    from{width:1px}
    to{width:100px}
}
//或者使用百分比
@keyframes name{
    0%{width:1px}
    100{width:100px}
}

創建好之後，我們需要在css選擇器裏引用我們寫的規則，

<div class="box1"></div>

.box1{
        width: 0px;
        height: 100px;
        background-color: #00FF7F;
        /* 引用 / 捆綁*/
        animation: first 2s;
    }
@keyframes first{
        0%{width:1px}
        100{width:100px}
    }

效果圖：

當然我們除了改變寬度`width` 還可以改變其他的屬性：`height`、定位、移動、旋轉、縮放等你所能想到的`css`屬性

css3動畫屬性非常多，我感覺常用的是animation的簡寫形式和一個動畫週期需要花費的時間animation-duration;

以下也是一個小的實例：

<div class="horse"></div>

html,
body {
    height: 100%;
}

.horse {
    width: 128px;
    height: 128px;
    background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
    background-size: 100% 100%;

    transform: scaleX(-1);
    animation: bounce 0.1s infinite;
}

@keyframes runhorse {
    0% {
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    25% {
        transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    50% {
        transform: translate(calc(100vw - 129px), calc(100vh - 200px));
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    75% {
        transform: translate(0, calc(100vh - 128px)) scaleX(-1);
    }

    100% {
        transform: translate(10px, 10px) translate3d(0, -4px, 0);
    }
}

body:hover .horse {
    animation: runhorse 2s linear infinite;
}

效果圖：

沒考慮小馬的頭的方向，只是寫了旋轉的效果，很多css屬性都可以用到動畫效果裏。可以參考~

推薦使用animate.css
①下載 animate.css
官方地址：animate.css
②或者
直接進入animate.css 隨後右鍵另存爲即可使用
③ 直接在頁面頂部head標籤通過link引入
基本模板如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>動畫</title>
        <link rel="stylesheet" href="css/animate.css">
        <style>
            .demo1{
                font-size: 30px;
                font-weight: bold;
                color: #00008B;
            }
        </style>
    </head>
    <body>
        <div class="demo1 animated zoomIn infinite">
            Anyw3c
        </div>
    </body>
</html>

效果如下：

接下來，就是對animate.css運動的一個小總結，雖然不多，但是歸類後方便後面查找！
/按官網順序/
①Attention seekers

bounce 輕輕跳躍一下（彈跳；彈起，反跳；彈回）
flash 閃爍兩次（使閃光；反射）
pulse 慢慢放大，然後回縮（跳動，脈跳）
shake 左右輕晃幾次
swing 以中間頂部爲中心小幅度晃動
tada 很調皮的一個小晃動，ps：只能這麼描述了
wobble 大幅晃動，地動山搖

②Bouncing Entrances

bounceIn 正中央，從無到有，輕輕抖動幾次
bounceInDown 從右側進來，無到有，輕輕抖動幾次
bounceInLeft 雷同，但是一定要注意大小寫“專業點叫駝峯式”
bounceInRighr
bounceInUp
bouncing Exits
bounceOut 正中央，從有到無，輕輕抖動幾次消失
bounceOutDown
bounceOutLeft
bounceOutRighr
bounceOutUp

③Fading Entrances

fadeIn 跟上面bounceIn還是有些區別的，畢竟不抖
fadeInDown 逐漸從上面down下來
fadeInDownBig逐漸從上面down下來，但是跟上面那位有稍微區別，加了big後起始位置是從設備外進來的
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightNig
fadeInUp
fadeInUpBig 用up測試下big吧
fading Exits
fadeOut 恰與fadeIn相反
fadeOutDown 逐漸從上面down下去消失，你確定不玩玩big了？
fadeOutDownBig逐漸從上面down下去，但是跟上面那位有稍微區別，加了big後終點位置是從設備外
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightNig
fadeOutUp
fadeOutUpBig

以下這些都是常用的

④Flippers

flip 一個誇張的放大飯莊縮小效果
flipInX 沿中心水平軸小幅度反轉出來
FlipInY 沿中心豎直軸小幅度反轉出來
flipOutX 沿中心水平軸小幅度反轉消失
FlipOutY 沿中心豎直軸小幅度反轉消失

⑤Lightspeed

lightSpeedIn 字面意思就是光速出來嘍，記得調快速度哦，什麼，怎麼調速我沒說麼？好吧，先留個坑，待會兒補。
lightSpeedOut 光速消失

⑥Rotating Entrances

rotateIn 準確說是以正中心點180度旋轉漸顯
rotateInDownLeft 沒錯，就是以左上角爲中心點轉下來
rotateInDownRight 就是以右上角爲中心點轉下來
rotateInUpLeft 就是以左上角爲中心點轉上去
rotateInUpRight 就是以右上角爲中心點轉上去
rotating Exits
rotateOut 準確說是以正中心點180度旋轉漸隱
rotateOut DownLeft
rotateOut DownRight
rotateOut UpLeft
rotateOut UpRight

⑦Sliding Entrances

slideInUp 這個slide感覺就有點雞肋了，有了上邊的Lightspeed、fadeIn，就會看出這個的弊端，動作幅度太小
slideInDown
slideInLeft
slideInRight
sliding Exits
slideOutUp 表現依舊不好
slideOutDown
slideOutLeft
slideOutRight

⑧Zoom Entrances

zoomIn 牢記哦，正中央出來的，做效果是最棒了
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoom Exits
zoomOut 牢記哦，正中央消失的，配合上面的zoomIn做效果是最棒了
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

⑨Specials

hinge 懸掛，顫抖，掉下去
rollIn 從左側旋轉進入
rollOut 向右側旋轉消失

到此呢，整個animate.css裏的所有動作效果規整完畢。回上邊去填坑！！

算了，還是在這裏填吧，若想用到延時加載和控制運動過渡時間，就必須要用到jquery了，所以我們先去找個jq引入到頁面底部

Demo如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/animate.css" />
<style type="text/css">
.test{
position: absolute;
width: 100px;
font-size: 50px;
top: 50px;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="animated rollIn test">test</div>
<script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
　　$('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
})
</script>
</body>
</html>

使用jq來重定義css樣式，這種方法其實違背了animate簡化運動代碼的初衷！

css3動畫和`animate.css`動畫庫使用

CSS3動畫

`css3`動畫可以分爲兩種。`transition`過渡動畫和`keyframes`關鍵幀動畫

過渡動畫

第一種叫過渡（transition）動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。所謂的狀態就是指大小、位置、顏色、變形（transform）等等這些屬性。css過渡只能定義首和尾兩個狀態，所以是最簡單的一種動畫。

要想使一個元素產生過渡動畫，首先要在這個元素上用transition屬性定義動畫的各種參數。可定義的參數有

transition-property：規定對哪個屬性進行過渡

transition-duration：定義過渡的時間，默認是0

transition-timing-function：定義過渡動畫的緩動效果，如淡入、淡出等，默認是 ease

transition-delay：規定過渡效果的延遲時間，即在過了這個時間後纔開始動畫，默認是0

爲了書寫方便，也可以把這四個屬性按照以上順序簡寫在一個 transition 屬性上：

如果是使屬性的默認值，則可以省略：
相當於：

如果想要同時過渡多個屬性，可以用逗號隔開，如：

使用transtion屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，當然就是在css中給這個元素定義一個類（:hover等僞類也可以），這個類描述的是過渡動畫結束時元素的狀態。

這樣，當我們把鼠標移動到div上的時候，div的狀態發生了變化，就能看到寬度從100到400，高度從100到400，背景顏色從黑到紅的，過渡時間爲3秒的過渡效果了。

除了使用hover等系統提供的僞類外，我們也可以隨意的定義自己的類，然後想要過渡時就通過js把類加到元素上面：

關鍵幀動畫

第二種叫做關鍵幀（keyframes）動畫。不同於第一種的過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀來說的話，過渡動畫只能定義第一幀和最後一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。

關鍵幀動畫的定義方式也比較特殊，它使用了一個關鍵字 @keyframes 來定義動畫。具體格式爲：

@keyframes 動畫名稱{

      時間點 {元素狀態}

      時間點 {元素狀態}

      …
}

例如：

這段代碼定義了一個名爲demo,且有5個關鍵幀的動畫。0% ，10% 等這些表示的是時間點，是相對於整個動畫的持續時間來說的，時間點之後的花括號裏則是元素的狀態屬性集合，描述了這個元素在這個時間點的狀態，動畫發生時，就是從第一個狀態到第二個狀態進行過渡，然後從第二個狀態到第三個狀態進行過渡，直到最後一個狀態。一般來說，0%和100%這兩個關鍵幀是必須要定義的。

關鍵幀的書寫方式很靈活，一行可以寫多個關鍵幀。

甚至它們之間的空格也是可以不要的。

現在我們知道了怎麼去定義一個關鍵幀動畫了，那怎麼去實現這個動畫呢？其實很簡單，只要把這個動畫綁定到某個要進行動畫的元素上就行了。

把動畫綁定到元素上，我們可以使用animation屬性。animation屬性有以下這些：

像前面講的transition屬性一樣，也可以把這些animation屬性簡寫到一個animation中，使用默認值的也可以省略掉。但 animation-play-state 屬性不能簡寫到animation中。

只要像這樣把定義好的動畫綁定到元素上，就能實現關鍵幀動畫了，而不是像第一種過渡動畫那樣，需要一個狀態的改變才能觸發動畫。

注意，爲了達到最佳的瀏覽器兼容效果，在實際書寫代碼的時候，還必須加上各大瀏覽器的私有前綴

`animate.css`的使用

1.`html`版本

animate.css是一個css3動畫庫，可以到github上去下載，裏面預設了很多種常用的動畫，使用也很簡單，因爲它是把不同的動畫綁定到了不同的類裏，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了：

首先在head中引入下載的animate.css文件

然後你想要哪個元素進行動畫，就給那個元素添加上animated類以及特定的動畫類名，animated是每個要進行動畫的元素都必須要添加的類。

假設使用jquery，要給一個id爲demo的元素添加一個搖動的動畫,因爲搖動的動畫類名爲shake，所以代碼是這樣的：

這樣載入頁面，元素就能動起來了。你也可以在動畫完成後，把動畫類移除，以便可以再次進行同一個動畫。

至於動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，你可以在你的的元素上自行定義，覆蓋掉animate.css裏面所定義的就行了。

注意這些屬性還要記得加上各瀏覽器的前綴。

總之是很靈活的，說到底不就是一個css文件嗎，一看就懂的，你在裏面想怎麼整就怎麼整，不想用它提供的類名，就在裏面改掉就行了。如果你只想用裏面的部分動畫，也可以把那些要使用的動畫分離出來，它的官網也提供了這樣的功能。

2.`vue`版本

1.安裝`animate.css`

npm install animate.css --save安裝

2.引入

方式1 在style中引入(加了scoped只在當前組件使用，沒有加則全局可用)

<style lang="scss" scoped>
@import 'animate.css';

</style>

方式2 在main.js全局引入（全局可用）

import 'animate.css'

方式3在script引入（全局可用）

<script>
import Header from '../components/common/Header'
import 'animate.css'
export default {
}
</script>

3.添加樣式必須添加`animated`類 +想要動畫效果

<h3 class="animated bounceInUp" v-if="flag">彈跳進入，彈跳出去效果</h3>

4.想要更好效果可用`vue`自帶的`transition`包裹組件

在進入/離開的過渡中，會有 6 個 class 切換。

v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to: 2.1.8版及以上定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter被移除)，在過渡/動畫完成之後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to: 2.1.8版及以上定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave被刪除)，在過渡/動畫完成之後移除。

完整例子

<template>
  <section class="home">
    <v-header></v-header>
    <div>主頁</div>
    <input type="button" value="顯示/隱藏" @click="flag=!flag" :duration="2000">
    <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
        <h3 v-if="flag">彈跳進入，彈跳出去效果</h3>
        <!--通過一個標識符，然後可以不停將轉換true/false，達到隱藏顯示的目的-->
    </transition>
  </section>
</template>

<script>
import Header from '../components/common/Header'
export default {
  name:'home',
  components:{'v-header':Header
  },
  data(){
    return{
      flag:false
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'animate.css';
</style>

CSS3動畫animation認識和Animate.css的使用

當然我們除了改變寬度`width` 還可以改變其他的屬性：`height`、定位、移動、旋轉、縮放等你所能想到的`css`屬性

以下這些都是常用的

css3動畫和`animate.css`動畫庫使用

CSS3動畫

`css3`動畫可以分爲兩種。`transition`過渡動畫和`keyframes`關鍵幀動畫

過渡動畫

關鍵幀動畫

`animate.css`的使用

1.`html`版本

2.`vue`版本

1.安裝`animate.css`

2.引入

3.添加樣式必須添加`animated`類 +想要動畫效果

4.想要更好效果可用`vue`自帶的`transition`包裹組件

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

CSS思維導圖

HTML，CSS，JavaScript知識樹思維導圖

HTML-CSS 知識點思維導圖（一）

C#基礎思維導圖

ES6之思維導圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

CSS3動畫animation認識和Animate.css的使用

當然我們除了改變寬度width 還可以改變其他的屬性：height、定位、移動、旋轉、縮放等你所能想到的css屬性

以下這些都是常用的

css3動畫和animate.css動畫庫使用

CSS3動畫

css3動畫可以分爲兩種。transition過渡動畫和keyframes關鍵幀動畫

過渡動畫

關鍵幀動畫

animate.css的使用

1.html版本

2.vue版本

1.安裝animate.css

2.引入

3.添加樣式 必須添加animated類 +想要動畫效果

4.想要更好效果可用vue自帶的transition包裹組件

當然我們除了改變寬度`width` 還可以改變其他的屬性：`height`、定位、移動、旋轉、縮放等你所能想到的`css`屬性

css3動畫和`animate.css`動畫庫使用

`css3`動畫可以分爲兩種。`transition`過渡動畫和`keyframes`關鍵幀動畫

`animate.css`的使用

1.`html`版本

2.`vue`版本

1.安裝`animate.css`

3.添加樣式必須添加`animated`類 +想要動畫效果

4.想要更好效果可用`vue`自帶的`transition`包裹組件