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 当重复次数为偶数时方向向前，奇数时方向相反

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

transform：在使用2D或3D转换前需用transform-style申明转换的类型，preserve-3d或者preserve-2d

属性
　　translate():
　　　　通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数移动。

　　rotate():
　　　　通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转.
　　　　在3D下，有rotateX():向屏幕例外翻转；rotateY()：在屏幕左右翻转，rotateZ():与2d下rotate()相同，在屏幕上顺时针或逆时针旋转。

　　scale():
　　　　通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

　　skew():
　　　　通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

transition:在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
例：transition:width 2s;

样式：ease 平缓变化　　

　　linear均匀变化

　　ease-in 缓慢开始

　　ease-out 缓慢结束

　　ease-in-out 缓慢开始，缓慢结束

动画：首先要先用@keyframe 动画名 的格式定义一个动画，再用animation调用动画

@keyframe myfirst{

　　from{}//开始效果

　　to{}//结束效果

}

或@keyframe myfirst{

　　0%{}　　　　　　//也可以用百分比表示动画的进程

　　30%{}

　　70%{}

　　100%{}

}

animation:
　　animation-name: myfirst; //动画名
　　animation-duration: 5s;//动画时长
　　animation-timing-function: linear;//动画变化效果，同transition
　　animation-delay: 2s;//动画延迟播放时间
　　animation-iteration-count: infinite;//infinite定义为无线循环
　　animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。

　　animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。

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

经典链接：

首先介绍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 动画十四原则