css3 tranform transition animation

tranform：对象图形变形

tranform的属性包括：

 

1、none 表示不进行变换；

 

2、rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数。

需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。//也就是说要看要基于哪一点旋转。

 

3、skew  扭曲             transform:skew(30deg,30deg)  skew(相对x轴倾斜,相对y轴倾斜)

 

4、scale  缩放             transform:scale(2,3) 横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。

 

5、translate 移动        transform:translate(50px, 50px);

 

6、perspective 镜头到元素平面的距离，所有元素都是放置在z=0的平面上，比如perspective(300px)表示，镜头距离元素表面的位置是300px;//该属性要放在动作属性之前

 

 

transition:对象的属性动画

transition: property duration timing-function delay;

 

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

 

eg：

.div{width:10px;}

.div:hover{transition:width:100px 2s  ease-in-out 1s;}//1s后div原来width:10px变为100px,所花时间为2s，速度为先加速再减速。

值得深入理解的transition-timing-function状态变化速度，默认值是ease，不是匀速，是逐渐变慢。

除了ease之外，还有包括1、linear:匀速；2、ease-in:加速；3、ease-out:减速；4、cubic-bezier函数：自定义速度曲线模式。（可以用工具网站来定制http://cubic-bezier.com/#.17,.67,.83,.67）；

 

transition的使用注意：

1、目前，各大浏览器（包括IE10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

2、不是所有的css属性都支持transition，完整的列表查看（http://oli.jp/2010/css-animatable-properties/），以及效果（http://leaverou.github.io/animatable/）；

3、transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0变到100px;transition可以算出中间状态，也就是说，如果开始或结束的设置是height:auto,那么不会产生动画效果。类似的情况还有display:none到block,background:url(1.jpg)到url(2.jpg)等。

transition的局限：

1、需要时间触发，所以没法再网页加载时候自动发送；

2、一次性的，不能重复发生，除非一再触发；

3、只能定义开始状态和结束状态，不定定义中间状态，也就是只有两个状态；

4、一条transition规则，只能定意思一个属性变化，不能设计多个属性。

 

animation:与元素绑定动画效果，是transition属性的扩展，弥补他的不足。

animation: name duration timing-function delay iteration-count direction;

 

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 

在学animation之前首先要先弄懂keyframes，叫做关键帧。

keyframes是什么呢，前面我们再使用transition制作一个简单的transition效果时候，我们包括了初始属性和最终属性，一个开始执行动作时间和延续动作时间以及动作的变换速率，其实这些都是一个中间值，如果我们要控制得更细一点，比如说我要第一时间段执行什么动作效果，第二个时间段执行什么动作，transition就无法实现，此时，我们可以使用keyframes关键帧来控制。

keyframes的语法：

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

eg:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}

}

animation:mymove 5s ease 0s infinite alternate

先用keyframes定义一个mymove的动画名字，总共分成五个阶段的状态（如上述代码），然后animation调用，动画无延迟，无限次无限循环，历时5s。