当前位置 博文首页 > 大曾blog：DaZeng：CSS3逐帧动画原理及其控制
上周作业复习WEB(一)，整理资料
居中写三遍，JS原生轮播图背着能写出。
1、手风琴 这个是点了才动你可以写hover，hover之后滑动但是移出就还原，点击才像视频里这样，不还原，你可以用div背景色，或者自己找图这里面是有动画效果的，不是直接就变了。
2、css单位，px、em、rem、vmin、vmax
3、媒体查询
4、帧动画
5、3d盒子
6、还有个正方体，我找找这个有扩展，换图
7、百叶窗
8、再写一个JQ轮播图
上一章：CSS的选择器、选择符、伪类——WEB
刚接触逐帧动画的时候一头雾水，因此又去学习了CSS3的动画接触到animation和@keyframs的使用，搭配JavaScript实现动画的控制。
成品镇楼：
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
使用方式（1）from…to…：
使用方式（2）0%…xx%…100%：
animation和transition的区别
相同点：
不同点：
animation为动画混合属性，由8个属性组成：
（图示为常用属性）
animation-name 检索或设置对象所应用的动画名称，如上面@keyframs创建的my。
animation-duration 检索或设置对象动画的持续时间。
animation-timing-function 检索或设置对象动画的过渡类型。
linear 动画从头到尾的速度是相同的。ease 默认。动画以低速开始，然后加快，在结束前变慢。ease-in 动画以低速开始。ease-out 动画以低速结束。ease-in-out 动画以低速开始和结束。或自定的step()函数，等下的逐帧动画就会使用。
难点：steps(number_of_steps, direction)是一个阶跃函数用于把整个操作领域切分为相同大小的间隔，每个间隔都是相等的。number必须为正数。大白话，number就是把设置的动画，间隔几次跳跃一次。
内置属性：step-start等同于steps(1,start)，动画分成1步，动画执行时以左侧端点为开始；step-end等同于steps(1,end)：动画分成1步，动画执行时以结尾端点为开始。
注意start和end的区别：
animation-delay 检索或设置动画在启动前的延迟时间
animation-iteration-count 检索或设置对象动画的循环播放的次数，默认为1。
animation-iteration-count: infinite | number
infinite 循环一直播放。number 一个数字，定义应该播放多少次动画animation-direction 检索或设置对象动画在循环中是否反向运动，
normal 默认值。动画按正常播放。reverse 动画反向播放。alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。initial 设置该属性为它的默认值。inherit 从父元素继承该属性。animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。initial 设置该属性为它的默认值。inherit 从父元素继承该属性。animation-play-state 检索或设置对象动画的状态，规定动画是否正在运行或暂停。默认是 “running”。
animation-play-state:running | paused
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
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;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
在有了css3动画的基础上，就可以开始实现把连续的图片运动起来了。
如图示，由四个小图片拼接而成的，现在给上代码让它运动起来：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="player.js"></script>
<style>
.boxA {
width: 300px; /*宽高尺寸任意增减*/
height: 100px;
background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;
background-size: 400% 100%; /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400% */
-webkit-animation: bird-slow .5s steps(3) infinite; /*发生了3次位移steps就是3*/
animation: bird-slow .5s steps(3) infinite;
}
@keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%; /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
}
}
@-webkit-keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%;
}
}
</style>
<title>demo</title>
</head>
<body>
<div class="boxA" id="boxA">
</div>
</body>
</html>
最关键的就是这两行代码：
background-size: 400% 100%;
这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400% 。
animation: bird-slow .5s steps(3) infinite;
发生了3次位移steps就是3，表明是三次跳跃，而不是简单的在图片上的移动
首先实现动画停止的功能
<button id="btn" type="button" onclick="func(this)">停止</button>
用户点击按钮调用 func(this) 这个函数，用到JavaScript，开头引入js文件
<script type="text/javascript" src="player.js"></script>
实现动画的停止和继续，在CSS中animation-play-state就可以实现，那在JS中因为$this代表的就是当前这个按钮对象，就可以根据它来进行判断开始和停止，再更改获取到的boxA.style.animationPlayState的值
function func($this){
var boxA = document.getElementById("boxA");
if($this.innerText=="停止"){
boxA.style.animationPlayState="paused";
$this.innerText="开始";
}else{
boxA.style.animationPlayState="running";
$this.innerText="停止";
}
};
在CSS中让按钮变好看一点：
#btn{
margin: 30px;
border: 1px solid black;
border-radius: 80%;
width: 60px;
height: 60px;
background-color: pink;
}
#btn:hover{
background-color: bisque;
}
下面来控制他的速度：
<button id="btn" type="button" onclick="fast(this)">加快</button>
<button id="btn" type="button" onclick="slow(this)">变慢</button>
<button id="btn" type="button" onclick="nomal(this)">正常</button>
在JS中怎么写呢？这里我掉坑了，控制速度我首先想到的是animation-timing-function，一直调试结果出现图片滑动播放的情况，之后仔细一想，动画播放是周期性的，缩短周期就可以控制速度了，所以正确的应该是改变他的animation-duration。
function fast($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".2s"
};
function slow($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".8s"
}
function nomal($this
