css3 Animation动画

标签：

动画参数：
-webkit-animation: changePosition（动画名称） 1.04s（动画持续时间） ease-in（使用的时间曲线） 1s(动画开始之
前的延时) infinite（动画重复的次数） alternate（动画的方向）;

参数解析:
div{ -webkit-animation-name:fontchange;}

（2）-webkit-animation-duration 表示动画持续的时间

（3）-webkit-animation-timing-function 表示动画使用的时间曲线

【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

（4）-webkit-animation-delay 表示开始动画之前的延时

【语法】 -webkit-animation-delay: delay_time;

（5）-webkit-animation-iteration-count 表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

（6） -webkit-animation-direction 表示动画的方向

【语法】-webkit-animation-direction: normal(默认) | alternate

normal 方向始终向前

alternate 当重复次数为偶数时方向向前，奇数时方向相反

----------------------------------------------------  分隔线  ---------------------------------------------------------------------

经典链接：

首先介绍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/
       http://www.sunnyzhen.com/course/animation_principles/demo.html 动画十四原则

css3 Animation动画

标签：

原文地址：http://www.cnblogs.com/lily2015/p/4661276.html