css3 animation动画技巧

一,css3 animation动画前言

　　随着现在浏览器对css3的兼容性越来越好，使用css3动画来制作动画的例子也越来越广泛，也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅，css3动画如何做弧线动画，css3动画是否有动画库，css3帧动画如何快速简单……   为了解决这些折磨人的问题，我们今天来分析一下:

　　首先介绍css3 Animation动画库：

　　http://daneden.github.io/animate.css/

　　基本涵盖了我们常见的基础css3动画，有时做css3动画没有灵感或者需要快速制作时，我们可以套用里面的css3帧动画，简单粗暴。

　　http://leaverou.github.io/animatable/ 这个是github玩家写的一个常用的hover animation动画

 

　　css3 Animation在线调节工具：

　　http://melonh.com/animationGenerator/              基于chrome的插件，可以快速调节页面上的动画

　　http://isux.tencent.com/css3/tools.html               腾讯isux一款非常强大的动画工具

　   http://tid.tenpay.com/labs/css3_keyframes_calculator.html           财付通的帧动画调节工具

 

　　自定义transition-timing-function中的cubic-bezier参数:

　　http://cubic-bezier.com/

　　http://matthewlein.com/ceaser/

 

二,css3 animation动画技巧

　　1.animation-direction让动画变得更圆滑：

　　　　animation-direction 属性定义是否应该轮流反向播放动画。

　　　　如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

　　　　语法：

　　　　animation-direction: normal|alternate;

值	描述	测试
normal	默认值。动画应该正常播放。	测试
alternate	动画应该轮流反向播放。	测试

　　　　animation-direction 值是 "alternate"属性实现双向循环的效果，可以很好的优化，我们本身用animation帧写的双向循环，原因在于浏览器自动实现的双向循环，比人为手工要好的多。

　　2.animation-fill-mode动画结束和开始时设置保持的动画：

　　　　animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见，主要用来实现，我们动画结束和开始时我们想保留的状态。

　　　语法

　　　　animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

　　3.0%用from代表，100%用to，设置cubic-bezier出现的问题：

　　　　这里面，给大家区分一个误区，通常我们写动画是这样的:

@keyframes rotate{
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
    from{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}
看看这两者的区别

　　可能对很多人来说，认为这种中0%可以用from，100%可以用to，两者是等价的，其实我然，当我们设置cubic-bezier，就会发现问题，有些手机的元素显示不出来。

@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    form{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}

　　这两者真的是不能全等， 已经踩过很多坑了。

 

　　4.动画原则：

　　　　这里有点要注意的是，我们做动画的元素，请尽量使用绝对定位，从而避免重绘重排的问题。

　　　　这里推荐几个做动画的原则：

　　　　动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

　　　　动画十二原则：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

　　5.图片雪碧图导致动画问题：

　　　　如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。

　　　　还有一点就是我们做动画是总想把图片都集中在一直图片，结果导致图片高度过高，超过3000px，就会导致在部分手机图片失真或者是看不到等现象。

　　　　现在，也越来越多的伙伴用rem来处理移动端，实现缩放的问题，建议做雪碧图时要增加空隙，最好的空隙是除以4还是整数。

　　6.base64位使用时注意事项：

　　　　使用base64:URL的优缺点
　　　　　　base64:URL传输图片文件的好处在于：
　　　　　　　　减少了HTTP请求
　　　　　　　　某些文件可以避免跨域的问题
　　　　　　　　没有图片更新要重新上传，还要清理缓存的问题
　　　　　 不足在于：
　　　　　　　　浏览器支持使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
　　　　　　　　增加了CSS文件的尺寸base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。
　　　　　　　　编码成本图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。

　　　　　　图片这里还有一点要注意，移动端，我们经常做图片加载器，然后样式里面我们也有图片还有时间戳，这里我们一定要保持时间戳一直，不然会严重导致加载时间变长，因为不同的时间戳，会导致再次去请求确认浪费时间。

　　　　　　优缺点权衡下的实际应用价值

　　　　　　　权衡上面所展示的优缺点，貌似base64:URL图片没有什么用武之地啊，实际上非也，有一种情况时有base64编码作为background-image背景图片利要远大于弊的。何种情况呢？
　　　　　　　在web页面制作的时候，由于某些现实原因，我们可以会用到下面这一类图片：
　　　　　　　　　　这类图片不能与其他图片以CSS Sprite的形式存在，只能独行
　　　　　　　　　　这类图片从诞生之日起，基本上很少被更新
　　　　　　　　　　这类图片的实际尺寸很小
　　　　　　　　　　这类图片在网站中大规模使用

　　　　　还有一点比较重要，就是就是不用这样合并写带有base64位图片background:url(base64:sdfsdfsd )  center center /20px 20px  no-repeat;，这样会导致安卓机无法显示，这种情况可能很多时候在压缩的时候出现。

 

　　　　　这里再说一个移动端border-radius的bug，通常我们画圆用border-radius：50%； 但我发现在低版本手机里面的qq浏览器不支持，只支持具体的数值px

 

　　推荐腾讯isux的两篇文章:

　　http://isux.tencent.com/play-with-html5-animate.html

　　http://isux.tencent.com/play-with-html5-optimize.html

 　 CSS3的calc()使用   http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html