CSS3动画animation认识和Animate.css的使⽤
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.png) no-repeat; background-size: 100% 100%;
transform:scaleX(-1);
animation: bounce 0.1s infinite;
}
js控制css3动画触发@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
官⽅地址：
②或者
直接进⼊ 随后右键另存为即可使⽤
③ 直接在页⾯顶部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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。