Css开发：动画效果实现
作者：互联网
一、动画实例
1、平移效果
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style>
.test {
width: 5px;
height: 5px;
background: #000000;
border-radius: 5px;
animation: move 1s linear;
}
@keyframes move{
100%{
margin-left: 50px;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
在div的class类样式中添加animation属性则为添加动画效果，对应值为动画、维持/消耗时间以及一些附属的属性。
如上代码中，通过@keyframes定义动画效果，move这个效果则是距离左边距50像素，搭配限制的时间后则为1秒内完成从左侧无边距到左边距50的变化，这个过程就是动画效果的实现。
附属属性中的linear代表匀速移动，其他类似的速度相关属性还有ease（默认，先慢开始再加快最后变慢结束）、ease-in（先慢开始然后加快结束）、ease-out（先快开始然后变慢结束）、ease-in-out（先慢后快后慢，和ease类似）。
二、动画属性详解
1、animation-name：
动画名称，添加动画效果时该属性必要的，默认为none，即无动画效果。
2、animation-duration：
执行周期，添加动画效果时该属性也是必要的，默认为0，即无动画效果。
3、animation-delay：
延迟时间，添加动画效果时该属性为动画播放前的延迟时间，它的值可以是秒、毫秒，默认为0，即不进行延迟，立即开始动画。
4、animation-timing-function：
执行速度，它的值是贝塞尔曲线，默认值是ease。
linear代表匀速移动，ease（默认，先慢开始再加快最后变慢结束）、ease-in（先慢开始然后加快结束）、ease-out（先快开始然后变慢结束）、ease-in-out（先慢后快后慢，和ease类似）。
5、animation-iteration-count：
循环次数，直接写数字可以自定义播放动画的次数，或者使用infinite来设置无限循环播放。
6、animation-fill-mode：
定义样式，即动画结束以后或者未开始前的样式，默认为none，就不会额外添加样式，动画执行后恢复到原本的样子。
forwards表示动画结束后样式定格，即取动画在100%进度时的样式，不会还原到动画执行前的样式。例如在鼠标悬浮到某个元素上需要放大显示时，可以设置成动画结束后保留样式，否则就会在放大结束后回退到放大前的大小。
backwards表示动画开始前预置样式，即取动画在0%进度时的样式（通常搭配animation-delay的延迟效果使用，在延迟期间显示预置的样式）。
both表示forwards和backwards都生效。
7、animation-direction：
轮流反向播放，默认值为normal，正常播放。
reverse表示动画反向播放。alternate表示动画奇数次正向播放，偶数次反向播放。alternate-reverse表示动画在奇数次反向播放，偶数次正向播放。
三、浏览器兼容性
IE还是一如既往的难以兼容，老版本肯定是不行了，animation-fill-mode这样的属性到IE10才兼容。
其他浏览器如Firefox、Opera等添加动画效果时可以通过animation和@keyframes来搭配使用，Safari 、 Chrome需要使用-webkit-animation和@-webkit-keyframes
标签：动画,效果,样式,ease,animation,播放,Css 来源： https://www.cnblogs.com/guobin-/p/16514477.html