动画相关之过渡和变换
过渡
过渡(Transition)，指属性值从原值到最终值的过渡状态。这是个复合属性，包括transition-property、transition-duration、transiton-timing-function和transition-delay四个属性值。
- 过渡属性
过渡属性(transition-property)，指要进行过渡的属性。
// 对高度进行过渡
transition-property: height;
// 对所有属性进行过渡
transition-property: all;
- 过渡时间
过渡时间(transition-duration)，指过渡从开始到完成的时间。
// 需要带上单位:S
transition-duration: 2s;
- 过渡函数
过渡函数(transition-timing-function)，指过渡如何进行。
// ease: 平滑过渡
transition-timing-function: ease;
- 过渡延迟
过渡延迟(transition-delay)，指过渡先等待一定时间在运行。
// 即使0秒，也要带上单位:S
transition-delay: 0s;
变换
变换(Transform)，指对某个元素进行平移、旋转、放大或倾斜等操作；通过变换原点(transition-origin)可指定变换的原点。
- 平移
平移(translate)，指元素相对于原来的位置，向其他方向移动一定距离。
// 在X轴上平移
transform: translateX(20px);
// 在Y轴上平移
transform: translateY(20px);
// translate是前面两个的合并属性，下面表示向右移动10px，向下一定20px
transform: translate(10px,20px);
- 旋转
旋转(rotate)，指元素围绕元素中心点进行旋转。
// deg表示角度，以X轴正半轴，向Y轴正半轴方向旋转
transform: rotate(30deg);
- 放大
放大(scale)，指对某个元素进行放大或缩小操作。
// 表示放大1.2倍
transform: scale(1.2);
- 倾斜
倾斜(screw)，指对元素进行倾斜操作，关于倾斜可参考这里。
// Y轴水平倾斜的角度
transform: screwX(30deg);
// X轴垂直倾斜的角度
transform: screwY(30deg);
// screw是前面两个属性的合并属性
transform: screw(30deg,30deg);
版权声明：本文为juetan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。