动画的英文"Animation" 一词源自于拉丁文字根的anima,意思为灵魂;动词animate是赋予生命,引申为使某物活起来的
animation可以解释为经由创作者的安排,使原本不具生命的东西像获得生命一般地活动
广义的动画是指把一些不动的东西(绘画或是木偶),运用逐帧拍摄的方式制作并放映,使之变成运动的影像.
1.动画的本质是动作的变化
2.传统动画的由多幅相关连的动画组成帧动画
3.传统动画是利用人眼睛的“视觉滞留效应”，当人眼所看到的影像消失后,影像仍在大脑中停留一段时间的现象。停留时间约1/24s（41.667ms）。
帧率：刷新频率，每秒钟播放的帧数，FPS（frame per second），单位是Hz
帧时长：每一帧停留的时间，如60FPS的动画帧时长约为16.7ms，意味着浏览器必须在16.7ms内绘制完这一帧
Web动画的本质是元素状态改变造成的样式变更
CSS动画简洁高效，提升交互体验而编写的代码可以轻松地和主要业务逻辑之间实现隔离
JS动画在多对象关联动画，或是需要在动画执行的特定时间点关联一些其他的业务逻辑等需要细节控制的场景中会显得更加清晰且易维护
CSS动画属于补间动画，Js动画属于逐帧动画
CSS动画主要包括transition过渡动画和animation关键帧动画，可以理解为animation是transition的增强版
transition动画需要提供起始和结束两个关键帧，浏览器才能够完成样式差异比对并计算出对应的过渡动画
transition-property
transition-duration(必填且大于0)
transition-timing-function
transition-delay
animation动画需要使用@keyframes关键词先将动画过程抽象出来，然后将其关联给指定元素的animation属性
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove{
from {
left:0px;}
to {
left:200px;}
}
js动画
function animate1(ele,target){
clearInterval(ele.timer);
var speed = target > ele.offsetLeft ? 20 : -20;
ele.timer = setInterval(function () {
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30)
}