区分CSS中的 transition / transform / animation 的使用

1.transition 过度效果集合 使用场景：对所有动态修改CSS的操作均有效果，主要有以下几点 dom位置移动 opacity，颜色改变 dom尺寸变更，border 可配合 transform 属性使用 transition有四个参数，默认值为 all 0s ease 0s，按序分别对应： 需要过度的CSS属性名称 完成过渡的时间 过渡的速度曲线 [ 慢-快-慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear] 触发过渡开始的延时时间 2.transform 操作元素 2D 或 3D 转换、旋转、缩放、移动或倾斜。 3D效果首先设置 perspective 属性, perspective 值越大3D效果越逼真、线条具有抽象感 配合transtion使用 移动 translater(x,y)、translateX()、translateY()、translateZ()、translate3d(x,y,z) 旋转 rotate(x,y)、rotateX()、rotateY()、rotateZ()、rotate3d(x,y,z,deg) 缩放 scale(x,y)、 scaleX()、 scaleY()、 scaleZ()、 scale3d(x,y,z,deg) 倾斜 skew(x,y)、 skewX(deg)、skewY(deg) skew没有3D属性 3.animaition 动画属性 animation 属性需要配合 keyframes 函数使用，在 keyframes 内规定动画执行轨迹 animation 有以下6个属性： animation-name 需要执行的 keyframe 函数名称 animation-duration 规定完成动画所花费的时间，以秒或毫秒计 animation-timing-function 动画的速度曲线 [ 慢-快-慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear] animation-delay 规定在动画开始之前的延迟 animation-iteration-count 规定动画应该播放的次数 次数、infinite animation-direction 规定是否应该轮流反向播放动画 normal、alternate animation 属性在dom样式内执行所选中的 keyframes 函数 keyframes 内可以使用 transform 属性 keyframes 内简写动画过程可以使用 from、to,想控制更多过程可以使用百分比 0% - 100% @keyframes animationName { from{}, to{} } //百分比 @keyframes animationName { 0%{} 10%{} ... 100%{} }

本文章由javascript技术分享原创和收集