前言：在CSS3中，动画效果有俩种方式：
第一种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果。
语法：transition: < property > < duration > < timing-function > < delay > ;
参数：
| 值 | 描述 |
|---|---|
| transition-property | 过渡动画的属性，如果是all表示所有的都进行过渡动画。 |
| transition-duration | 动画间隔时间，以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。 |
| transition-timing-function | 加速曲线，实质上这个函数会建立一条加速度曲线，在整个动画变化过程中，变化速度改变 。默认：ease |
| transition-delay | 动画开始之前需要等待的时间。 |
transition-property 语法
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果。 |
| all | 所有属性都将获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。(transition-property:width,background) |
transition-duration 语法
transition-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。 |
transition-timing-function 语法
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| steps | 函数指定了一个阶跃函数 ； |
理解steps
steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
效果地址：效果演示
transition-delay 语法
| 值 | 描述 |
|---|---|
| time | 指定秒或毫秒数之前要等待切换效果开始 |
.box {
/* 分别设置多个属性 */
transition: height 1s ease, width 2s linear;
}
效果地址： https://www.jianshu.com/p/90eaa28d4cb9
1.1 过渡的缺点
transition的优点在于简单易用，但是它有几个很大的局限。
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。
- 一条transition规则，只能定义一个属性的变化，不能控制多个属性。
Animation就是为了解决这些问题而提出的。
@keyframes简介
使用animation属性定义CSS3动画需要2步：
（1）定义动画 ；（@keyframes）
（2）调用动画；（animation）
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：
<style type="text/css">
第一种：
@keyframes 动画名 {
0% {
……
}
100% {
……
}
}
第二种：
@keyframes 动画名 {
from {
……
}
to {
……
}
}
</style>
我们可以使用@keyframes规则定义动画，但是这样定义的动画并不会自动执行，我们还需要“调用动画”，这样动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。
1.2 动画animation
- 说明：注意，
animation-name调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
ie9不支持，ie10以上才支持
| 属性 | 描述 | 可取值 |
|---|---|---|
| @keyframes | 规定动画。 | {} |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | animation: name duration timing-function delay iteration-count direction; |
| animation-name | 规定 @keyframes 动画的名称。 | 字符串 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 时间带单位，s秒，ms毫秒 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | ease、ease-in 加速、ease-out减速 |
| animation-delay | 规定动画何时开始。默认是 0。 | 延迟时间带单位 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 动画执行次数，可以是数字或者infinite无限次 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | normal：动画按正常播放。reverse ：动画反序播放。 alternate：动画正序播放然后反向播放。alternate-reverse：动画反向然后正向播放。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | running：当前动画正在运行，paused:当前动画以被停止。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | none：默认值，回到动画没开始时的状态。backwards：让动画回到开始的状态。forwards:记录最后一帧的状态。both: 根据animation-direction） |
如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;
案例：
/* 第一步：定义关键帧 */
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* 第二步：定义动画属性 */
div
{
animation-name: myfirst;
animation-duration: 5s; /*必须设置,默认0，不然没有动画*/
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* 第三步：执行动画 */
div:hover {
animation: myfirst 5s linear 2s infinite alternate;
}
播放暂停案例
.box {
animation: spin 1s linear infinite;
/* 动画暂停 */
animation-play-state: paused;
}
.box:hover {
/* 动画执行 */
animation-play-state: running;
}
关键帧的自由定制案例：
.box {
animate: rainbow 1s linear;
}
/* 0%可以用from代表，100%可以用to代表 */
@keyframes rainbow {
from { background: #c00 } /* from == 0%*/
50% { background: orange }
to { background: yellowgreen } /*to == 100%*/
}
/* 如果省略某个状态，浏览器会自动推算中间状态 */
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
执行多个动画案例：
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; }}
h1 {
font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;
width: 16.5em; /* fallback */
width: 30ch; /* # of chars */
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 20s steps(30, end), /* # of steps = # of chars */
blink-caret .5s step-end infinite alternate;
}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
color: rgba(44, 209, 100, .8);
font-size: 40px;
font-weight: bolder;
text-shadow: 3px 3px 10px rgba(44, 209, 100, .4);
margin: 100px auto;
width: 300px;
text-align: center;
animation: shake 1s ease 1 normal;
}
@keyframes shake {
form {
transform: translate3d(0, -15px, 0);
}
40%, 77%, 90% {
transform: translate3d(0, -4px, 0);
}
50%, 82%, 100% {
transform: translate3d(0, 0, 0);
}
}
.box2 {
background-color: aqua;
width: 200px;
height: 200px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div class="box">
动画文字
</div>
<div class="box2 animated flash infinite">
</div>
</body>
</html>
Transform
transform属性应用于元素的2D或3D转换。字面上就是变形，改变的意思。
这个属性允许将元素进行旋转，缩放，移动，倾斜等。
| 值 | 描述 |
|---|---|
| none | 表示不进么变换 |
| rotate | 通过指定的角度参数对原元素指定一个2D rotation（2D 旋转）transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)；顺时针旋转 transform:rotate(-30deg)；逆时针旋转 |
| translate | translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动） |
| scale | scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。scaleX(1.2)；scaleY(1.2) |
| skew | 扭曲/变形；skew(x,y)使元素在水平和垂直方向同时扭曲 transform:skew(30deg,10deg) |
| matrix | 我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。 |
CSS3动画库
Animate.css
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。
animate.css的使用
animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：
首先在head中引入下载的animate.css文件
<link rel="stylesheet" href="css/animate.min.css">
然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。
<div class="box animated rubberBand"></div>
animated ：必须添加，rubberBand：具体动画名
requestAnimationFrame
引子：计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化。
大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。
requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
特点：
【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
使用：
requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。
requestID = requestAnimationFrame(callback);
//控制台输出1和0
var timer = requestAnimationFrame(function(){
console.log(0);
});
console.log(timer);//1
cancelAnimationFrame方法用于取消定时器
//控制台什么都不输出
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(timer);
也可以直接使用返回值进行取消
var timer = requestAnimationFrame(function(){
console.log(0);
});
cancelAnimationFrame(1);
兼容：
IE9-浏览器不支持该方法，可以使用setTimeout来兼容
if (!window.requestAnimationFrame) {
requestAnimationFrame = function(fn) {
setTimeout(fn, 17);
};
}
应用
<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
myDiv.style.width = '0';
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
效果：
《江城子·乡愁》
文/非凡主力
年来总是苦奔忙。
夜寒凉，亿故乡。
归路迢迢，望雁落它方。
一抹斜阳淡，只影萧然。
都市霓虹炫闪，天边月。
父母欢颜，难相见。
虔心祈愿，安好寿延年。
二零一四年 • 冬
扫一扫
1489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
