CSS动画与变形详解：过渡、动画、2D/3D变换实战

一、过渡Transition1.1 过渡的理解过渡transition​ 可以指定一个属性发生变化时的切换方式实现平滑的动画效果。特性说明触发方式需要在某种条件下触发如hover、active、focus执行次数一次性效果不能循环帧数只有两帧必须设置动画初始值和结束值兼容性IE10开始兼容移动端兼容良好1.2 过渡的4个属性transition-property — 指定过渡属性值说明none没有属性获得过渡效果all默认值所有属性都参与过渡property自定义应用过渡效果一个或多个用逗号隔开注意所有数值类型的属性都可以参与过渡如width、height、left、top、border-radius、opacity等从一个有效数值向另一个有效数值进行过渡transition-property: width, height; transition-property: all;transition-duration — 过渡持续时间必填transition-duration: 2s; /* 2秒 */ transition-duration: 500ms; /* 500毫秒 */单位​s秒和ms毫秒1s 1000mstransition-timing-function — 过渡变化曲线选填值说明ease默认值慢速开始先加速然后再减速linear匀速运动ease-in先慢后快加速运动ease-out先快后慢减速运动ease-in-out以慢速开始和结束的过渡效果steps(n)分布执行过渡效果cubic-bezier(n,n,n,n)立方贝塞尔曲线函数值在0-1之间transition-timing-function: linear; transition-timing-function: steps(4);transition-delay — 过渡延迟选填transition-delay: 1s; /* 延迟1秒后开始过渡 */transition — 简写属性要求​ 如果要写延迟两个时间中第一个写过渡时间第二个写延迟时间。/* transition: property duration timing-function delay */ transition: width 2s linear 1s; transition: all 0.5s ease;二、动画Animation2.1 动画的理解动画和过渡类似都可以实现动态效果。不同的是过渡需要在某个属性发生变化时才能触发如hover、active而动画可以自动触发。2.2 关键帧keyframes第一步设置关键帧关键帧设置了动画的每一个步骤使用keyframes属性。方法一from/to 写法keyframes 关键帧名称 { from { /* 初始状态属性 */ margin-left: 0; } to { /* 结束状态属性 */ margin-left: 500px; } }方法二百分比写法keyframes 关键帧名称 { 0% { /* 初始状态属性 */ margin-left: 0; } 50% { /* 中间状态 */ margin-left: 250px; } 100% { /* 结束状态属性 */ margin-left: 500px; } }注意帧的顺序可以更改不关顺序问题如果初始帧不写默认是原始设置如果结束帧不写默认也是原始设置可以同时设置多个关键帧用逗号隔开2.3 动画属性animation-name — 动画名称必填绑定到选择器的关键帧名称告诉系统需要执行哪个动画。animation-name: text; /* 与 keyframes 名称对应 */可以设置多个动画用逗号隔开animation-name: anim1, anim2;animation-duration — 动画持续时间必填animation-duration: 2s; /* 动画完成时间为2秒 */animation-timing-function — 动画速度曲线与过渡的transition-timing-function取值相同。值说明ease默认值慢速开始先加速然后再减速linear匀速运动ease-in先慢后快ease-out先快后慢ease-in-out以慢速开始和结束steps(n)分布执行cubic-bezier(n,n,n,n)立方贝塞尔曲线animation-timing-function: linear;animation-delay — 动画延迟animation-delay: 1s; /* 延迟1秒后开始动画 */animation-iteration-count — 动画播放次数值说明n定义动画播放n次infinite无限次往返执行animation-iteration-count: 3; /* 播放3次 */ animation-iteration-count: infinite; /* 无限循环 */animation-direction — 动画方向值说明normal默认值从from向to运行每次都这样reverse从to向from运行每次都这样alternate从from向to运行重复执行时反向执行alternate-reverse从to向from运行重复执行时反向执行animation-direction: alternate; /* 来回交替播放 */animation-fill-mode — 动画填充模式值说明none默认值动画执行完毕元素回到原来的位置forwards动画执行完毕会停止在动画结束的位置backwards动画延时等待时元素就处于开始位置both结合了forwards和backwards的特点animation-fill-mode: forwards; /* 停在结束位置 */animation-play-state — 动画播放状态值说明running默认值动画执行paused动画暂停animation-play-state: paused; /* 暂停动画 */animation — 简写属性animation: 名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式 播放状态;animation: text 2s linear 1s infinite alternate forwards;三、变形 2DTransform 2D3.1 变形概述变形属性transform​ 可以让元素进行位移、旋转、缩放、倾斜等操作。特性说明不影响布局变形不会影响到页面的布局只折腾自己合并写法尽量将多个变形写在一个transform里否则后面的会覆盖前面的可选值变形类型函数位移translate()缩放scale()旋转rotate()倾斜skew()3.2 位移 — translate()transform: translate(参数1, 参数2);参数说明参数1x轴上移动的距离正值向右负值向左参数2y轴上移动的距离正值向下负值向上默认为0专用函数transform: translateX(100px); /* 沿x轴平移 */ transform: translateY(100px); /* 沿y轴平移 */ transform: translateZ(100px); /* 沿z轴平移需结合视距 */注意平移元素可以是数字或百分比百分比是相对于自身计算的位移的参考原点是元素的左上角如果是通过active进行位移执行完毕后会还原不会影响别的元素对于行内元素没有效果3.3 旋转 — rotate()transform: rotate(45deg); /* 顺时针旋转45度 */特性说明旋转中心默认绕着中心点转动单位deg度正值顺时针旋转负值逆时针旋转专用函数transform: rotateX(45deg); /* 绕X轴旋转 */ transform: rotateY(45deg); /* 绕Y轴旋转 */ transform: rotateZ(45deg); /* 绕Z轴旋转 */3.4 缩放 — scale()transform: scale(2); /* 放大2倍 */ transform: scale(0.5); /* 缩小到0.5倍 */参数说明默认值1小于1缩小0则消失大于1放大一个值等比例缩放两个值第一个x轴缩放第二个y轴缩放专用函数transform: scaleX(2); /* X轴缩放 */ transform: scaleY(0.5); /* Y轴缩放 */注意​ 缩放也不会影响其他盒子。3.5 倾斜 — skew()transform: skew(30deg); /* X轴倾斜30度 */ transform: skew(30deg, 20deg); /* X轴倾斜30度Y轴倾斜20度 */参数说明一个参数表示x轴的倾斜角度y轴默认为0两个参数第一个x轴倾斜第二个y轴倾斜x正值向左变形x负值向右变形y正值向上变形y负值向下变形专用函数transform: skewX(30deg); /* X轴倾斜 */ transform: skewY(30deg); /* Y轴倾斜 */3.6 变形原点 — transform-origintransform-origin: center center; /* 默认值中心点 */ transform-origin: left top; /* 左上角 */ transform-origin: 50% 50%; /* 百分比 */ transform-origin: 0 0; /* 像素值 */特性说明默认值元素的中心center center作用改变变形的原点位置前提只有在设置了transform属性时才会起作用取值方向值left、center、top、right、bottom或px、%数值四、变形 3DTransform 3D4.1 父元素样式设置3D变化需要父元素设置样式才能保留3D的变化效果。/* 保留3D变化 */ transform-style: preserve-3d; /* 默认值 flat */ /* 设置视角深度景深 */ perspective: 800px; /* 人眼距离网页的距离一般不小于600px */注意​ perspective一般设置在父元素上值为800-1200px通常为900-1000px。4.2 3D位移 — translate3dtransform: translate3d(x, y, z); /* 必须传递三个参数 */函数说明translateX(x)沿x轴正值向右负值向左translateY(y)沿y轴正值向下负值向上translateZ(z)沿z轴正值向屏幕外负值向屏幕内4.3 3D旋转 — rotate3dtransform: rotateX(45deg); /* 绕X轴旋转正值为顺时针 */ transform: rotateY(45deg); /* 绕Y轴旋转正值为逆时针 */ transform: rotateZ(45deg); /* 绕Z轴旋转正值为顺时针 */ transform: rotate3d(x, y, z, deg); /* 沿自定义轴旋转 */角度方向说明函数正值负值rotateX顺时针逆时针rotateY逆时针顺时针rotateZ顺时针逆时针特殊属性transform-origin: left; /* 绕着元素的左边框旋转 */4.4 背面可见性 — backface-visibilitybackface-visibility: visible; /* 背面可见默认 */ backface-visibility: hidden; /* 背面不可见 */4.5 3D缩放 — scale3dtransform: scale3d(num, num, num); /* 必须传递三个参数 */ transform: scaleX(x); /* X轴缩放 */ transform: scaleY(y); /* Y轴缩放 */ transform: scaleZ(z); /* Z轴缩放 */注意​ 参数为数字无单位。3D缩放较为复杂了解即可。五、动画库 Animate.css5.1 简介Animate.css 是一个流行的CSS动画库提供了丰富的预设动画效果可以直接使用。5.2 引入方式link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css/5.3 官方网站Animate.css | A cross-browser library of CSS animations.六、属性速查表6.1 过渡属性属性作用必填transition-property指定过渡属性❌transition-duration过渡持续时间✅transition-timing-function过渡速度曲线❌transition-delay过渡延迟❌transition简写属性-6.2 动画属性属性作用必填animation-name动画名称✅animation-duration动画持续时间✅animation-timing-function动画速度曲线❌animation-delay动画延迟❌animation-iteration-count播放次数❌animation-direction动画方向❌animation-fill-mode填充模式❌animation-play-state播放状态❌animation简写属性-6.3 变形属性函数作用示例translate()位移translate(100px, 50px)rotate()旋转rotate(45deg)scale()缩放scale(1.5)skew()倾斜skew(30deg)transform-origin变形原点center center七、总结本文详细介绍了CSS动画与变形的完整知识体系过渡属性变化时的平滑切换效果需触发条件动画可自动触发的多帧动画效果2D变形位移、旋转、缩放、倾斜四种变换3D变形三维空间的位移、旋转、缩放动画库Animate.css的使用方法掌握这些知识后你将能够创建丰富多彩的页面动画效果提升用户体验。