css3属性中有关于动画的三个属性transition、 transform 、animation;我分别理解为过渡,变换,动画。虽意义相近,但具体角色不一。
Transition
transition
指过渡啦,就是从a点都b点,就像过江坐渡轮,是有时间的,是连续的,一般针对常规CSS属性;transform
指变换,就那几个固定的属性:旋转啦,缩放啦,偏移啦什么的,与独立于远房亲戚transition
使用,但是,效果就是很干涩机械的旋转移动。要是配合transition属性,旋转啊什么的,就会很平滑。animation
最先安家于Safari浏览器,自成一家,与transition和transform有老死不相往来之感,但是要说单挑的话,animation
要比transition
厉害些。
transition属性是下面几个属性的缩写
transition-property
指定过渡的属性值,比如transition-property:opacity 就是指定opacity属性参与这个过渡
transition-duration
指定这个过渡的持续时间
transition-delay
延迟过渡时间
transition-timing-function
指定过渡动画缓动类型,有ease
| linear
| ease-in
| ease-out
| ease-in-out
| cubic-bezier()
其中,linear
线性过度,ease-in
由慢到快,ease-out
由快到慢,ease-in-out
由慢到快在到慢。
Transform
transform
指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform
就是指的这个东西,拉伸,压缩,旋转,偏移。
.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }
结果就有类似下面的些效果:
animations
animation-name:/*动画属性名,也就是我们前面keyframes定义的动画名*/
animation-duration: /*动画所持续的时间*/
animation-timing-function:ease-in-out | ease-in | linear | ease | cubic-bezier; /*动画频率,和transition-timing-function是一样的*/
animation-delay: /*动画延迟的时间*/
animation-iteration-count: /*播放动画循环次数*/
animation-direction:/*定义动画方式*/
animation- play-state:/*控制元素动画的播放状态*/
@keyframes 关键帧
我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。著作权归作者所有。
@keyframes 动画名称{
from {
}
Percentage {
}
to {
}
}
或者全部写成百分比的形式:
@keyframes 动画名称{
0%{
}
100% {
}
}
例:
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}