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簡化運動代碼的初衷！
參考文章：