css3.0 Transform / Transition / Animation

浏览数：14 / 时间：2015年06月09日

transform的含义是：改变，使…变形；转换是静态属性 相当于图形变换工具

关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说，应该只需要preserve-3d就好了，但是从谣传“开启了perserve-3d就使用了GPU加速”来说，这个属性可能是为了降低系统消耗用的，毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective 及 perspective-origin 来指定透视点。
具体的给设计师改变元素样式用的属性则有以下五个：

translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

例子：div{transform:rotate(7deg);}

Transition 简单动画

可以说它是animation的简化版本

值	　　　　　　　　　　描述
transition-property	规定设置过渡效果的 CSS 属性的名称。（1. none 代表没有动画  2.all 所有属性参与动画   3.单个指定 width  宽度参与动画）
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

.use_transition_hover{
　　width:500px; height:130px;
　　transition:height 2s;
}
.use_transition_hover:hover{
height:215px;
}

Animation 是transition 的扩展

animation 有@keyframes 属性规定动画（时间轴与关键帧）

属性                 　　　　　描述                                   　　　　　　　　　　　　 CSS
@keyframes               　　 规定动画。   　　　　　　　　　　　　　　　　　　　　　　　　　　　　  3
animation                　　 所有动画属性的简写属性，除了 animation-play-state 属性。    　　　  3
animation-name    　　　　 　　规定 @keyframes 动画的名称。    　　　　　　　　　　　　　　　　　　  3
animation-duration        　　规定动画完成一个周期所花费的秒或毫秒。默认是 0。    　　　　　　　　　  3
animation-timing-function    规定动画的速度曲线。默认是 "ease"。   　　　　　　　　　　　　　　　　 3
animation-delay    　　　　　　规定动画何时开始。默认是 0。    　　　　　　　　　　　　　　　　　　　　3
animation-iteration-count    规定动画被播放的次数。默认是 1。  　　　　　　　　　　　　　　　　　　  3
animation-direction    　　　 规定动画是否在下一周期逆向地播放。默认是 "normal"。   　　　　　　　　 3
animation-play-state    　　  规定动画是否正在运行或暂停。默认是 "running"。    　　　　　　　　　　3
animation-fill-mode    　　　 规定对象动画时间之外的状态。   　　　　　　　　　　　　　　　　　　　　 3

例子

div｛left:100px;width：100px; height:100px; animation:goAnimation 10s linear;｝

@keyframes goAnimation{

　　form{left:100px; width:110px;}

　　50%{left:105px;width:120px;}

　　to{left:300px; width:150px;}

}

css3.0 Transform / Transition / Animation,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css3.0 Transform / Transition / Animation