transfrom、transition、animation区别
transfrom
transform是静态属性,非动画属性,和margin-left、margin-top类似。
-
translate:平移,类似position:relative;translate()分三种情况:
- translate(x, y) // 水平、垂直方向移动
- translateX(x) // 水平方向移动,相当于translate(x, 0)
- translateY(y) // 垂直方向移动,相当于translate(0, y)
-
scale:缩放,x,y可以是负数,负数的情况缩放并反转
- scale(x, y) // 水平、垂直方向缩放,第二个参数未提供则取与第一个一样的值
- scaleX(x) // x轴缩放
- scaleY(y) // y轴缩放
-
rotate:旋转,整数顺时针,负数逆时针
- transform:rotate(90deg);
- transform-origin:top center; // 变形的基点,默认中心点
- skew:斜角变换
- skew(x, y) // 沿x轴、y轴进行扭曲变形,第二个参数未提供取值为0
- skewX(x) // 沿x轴进行扭曲变形
- skewY(y) // 沿y轴进行扭曲变形
- matrix:将所有的2D效果全部组合在了一起使用
transition
animation的简化版本
- transition: all 1s ease 0; // 过渡效果的css属性名称、过渡效果时间、速度曲线、延迟时间
animation
- animation: move 1s ease 0 infinite alternate; // keyframe名字、过渡效果时间、速度曲线、延迟时间、循环次数、是否轮流反向播放动画
- 定义keyframe:@keyframes name {}
transition和animation做动画
常和transfrom配合使用,区别如下:
transition | animation | |
---|---|---|
触发条件 | 通常和hover等事件配合,由事件触发 | 和gif差不多,立即播放 |
循环 | 不能循环 | 可设置循环次数 |
精确性 | 只能设置头尾,所有样式属性都要一起变化 | 可以设置每一帧的时间和样式,每一帧变化的样式可以单独设置 |
与JavaScript的交互 | tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果 | 与js交互不是很紧密 |