CSS3 属性
过渡效果
在此之前的效果转变都是瞬时完成的, 较为突兀
元素两种状态下切换样式, 借助 transitio 属性增加平滑过渡效果
写在默认样式和改变样式里面是有区别的
写在默认中 往返都有效果,推荐写在默认中
写在伪类中 只有被触发才有效
相关属性
transition-property 过渡属性 ( all / 其他具体属性)
transition-duration 过渡时长 ( s/ms )
transition-timing-function 过渡速度 ( 匀速 linear / 缓慢开始结束中间加速 默认值 ease / ... )
transition-delay 设置延迟 ( s/ms )
支持简写
transition: all 5s ease 3s;
分别对应 pro dur tim del
转换属性
实现元素的平移, 旋转, 缩放 借助属性 transform
取值为 转换函数
平移
指定 水平 和 垂直 的偏移距离 正负代表方向
translate(x,y)
旋转
指定元素的旋转角度 单位为 deg 正负代表顺逆
rotate(ndeg)
缩放
指定缩放比例 取无单位的数值
n > 1 放大
0 < n < 2 缩小
n < 0 数值代表缩放比, 负号代表元素翻转
默认基准点为元素中心点 可用属性 transform-origin: x y; 来选取基准点
scale(n)