css动画transform与animation属性详情

css 动画:

transform:2D变换 //参照:https://developer.mozilla.org/en/CSS/transform

Syntax:
transform: <transform-function> [<transform-function>]* | none

Values:
transform-function;
none;

transform-function:
matrix:
transform: matrix(a, c, b, d, tx, ty) //指定一个由6个值组成的二维变换矩阵
a:宽度缩放比
b:以x轴进行倾斜
c:以y轴进行倾斜
d:高度缩放比
tx:x轴位移
ty:y轴位移

rotate:
transform: rotate(angle) //旋转效果 e.g. rotate(30deg)

scale:
transform: scale(sx[, sy]) //由指定[SX,SY]描述进行二维缩放操作
scaleX:
transform: scaleY(sy) //x轴缩放
scaleY:
transform: scaleY(sy) //y轴缩放

skew:
transform: skew(ax[, ay]) //以x轴或y轴进行倾斜
skewX:
transform: skewX(angle) //以x轴进行倾斜
skewY:
transform: skewY(angle) //以y轴进行倾斜

translate:
transform: translate(tx[, ty]) //以x轴或y轴进行位移
translateX:
transform: translateX(tx) //以x轴进行位移
translateY:
transform: translateY(ty) //以y轴进行位移

transform-origin:变换起点 //参照:https://developer.mozilla.org/en/CSS/transform-origin

Syntax:
transform-origin: [ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ] ?
transform-origin: [ left | center | right ] || [ top | center | bottom ]

Examples:
transform-origin: 100% 100%;
transform-origin: 100px 100px;
transform-origin: bottom right;
3D transform:3D变换

matrix3d:
transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

rotate3d: 3D旋转
transform: rotate3d(x, y, z, a)
x: <number> 表示旋转轴的x坐标向量
y: <number> 表示旋转轴的y坐标向量
z: <number> 表示旋转轴的z坐标向量
a: <angle> 旋转角度
rotateX:
rotateX(a) //X轴旋转度
rotateY:
rotateY(a) //Y轴旋转度
rotateZ:
rotateZ(a) //Z轴旋转度

scale3d: 3D缩放
transform:scale3d(sx, sy, sz)
scale3dX(s)
scale3dY(s)
scale3dZ(s)

translate3d: 3D位移
transform: translate3d(x, y, z)
translateX
translateY
translateZ

perspective: 视角
transform: perspective(lenght)

transform-style: preserve-3d || flat //开启3D视角

transform-origin-z: 变换起点的Z轴起点

More:
transform-function详细介绍: https://developer.mozilla.org/en/CSS/transform-function
Intro to CSS 3D transforms: http://desandro.github.com/3dtransforms/
transition:过渡

Syntax:
transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

transition-property: none | all | [<property-name>][, <property-name>]* //指定将使用过渡效果的css属性,可指定多个

transition-duration: time[, time]*
//指定完成过渡的时间,可指定多个。指定多个时每个时间对于transition-property中的属性,time数量少于property数量则缺少的time值默认为0s,多出时后面的time将弃用

transition-timing-function: <timing-function> [, <timing-function>]* //建立一个加速度曲线来改变过渡的持续时间
Values:
linear //等价于 cubic-bezier(0,0,1,1)
ease //默认值,等价于 cubic-bezier(0.25,0.1,0.25,1)
ease-in //等价于 cubic-bezier(0.42,0,1,1)
ease-out //等价于cubic-bezier(0,0,0.58,1)
ease-in-out //等价于cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) //指定一个赛贝尔曲线
step-start //equivalent to steps(1, start)
step-end //equivalent to steps(1, end)
steps(start,end)

transition-delay:time[, time]* //延时执行过渡动画,可指定多个时间值,与transition-property对应
Animation:动画
Syntax:
animation: [ <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
<animation-iteration-count> || <animation-direction>]
[, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
<animation-iteration-count> || <animation-direction>] ]*
animation-name: none | <name> [, none | <name>]* //动画名
animation-duration: <time> [, <time>]* //持续时长
animation-timing-function: <timing-function> [, <timing-function>]* //建立一个加速度曲线来改变过渡的持续时间
animation-delay: <time> [, <time>]* //指定动画延时执行的时间
animation-iteration-count: infinite | <number> [, infinite | <number>]* //动画循环执行的次数
animation-direction: normal | alternate | reverse | alternate-reverse[, normal | alternate | reverse | alternate-reverse]* //动画执行的步骤顺序
animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]* //动画填充模式
animation-play-state: running | paused [, running | paused]* //动画执行状态

@keyframes: //关键帧
Syntax:
@keyframes <identifier> {
[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

@keyframes run {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
创建Animation:
1、创建动画帧:keyframes
2、调用动画名:animation-name
3、设置动画持续时长:animation-duration
4、设置动画变换频率:animation-timing-function
5、设置动画开始时间:animation-delay
6、设置动画播放次数:animation-iteration-count

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*