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"，则动画会在奇数次数（一、三、5 等等）正常播放，而在偶数次数（二、四、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