CSS动画-transition/animation _生活百科

文章插图
HTML系列：

人人都懂的HTML基础知识-HTML教程(1)
HTML元素大全(1)
HTML元素大全(2)-表单

CSS系列：

CSS基础知识筑基
常用CSS样式属性
CSS选择器大全48式
CSS布局秘籍(1)-任督二脉BFC/IFC
CSS布局秘籍(2)-6脉神剑
CSS动画-transition/animation

00、CSS动画【CSS动画-transition/animation】CSS系列：

CSS基础知识筑基
常用CSS样式属性
CSS选择器大全48式
CSS布局秘籍(1)-任督二脉BFC/IFC
CSS布局秘籍(2)-6脉神剑
CSS动画-transition/animation

CSS动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的动态过程，CSS中提供了两种动画实现方式：transition、animation 。
对比transition动画animation动画定义基于CSS属性变化的简单过渡动画基于关键帧@keyframes实现更复杂的动画复用只能执行一次，不可重复执行，复用不便可多次执行，复用方便执行方式页面加载不会默认执行，须触发执行可直接执行、可控制动画事件无，只能预估动画时间，用定时器setTimeout模拟支持监听事件，如动画开始、结束动画帧只有初始?。ǖ鼻把剑⒔崾 。ùシ⒍钡难剑?/td>支持任意多帧动画设置五星好评灵活简单功能丰富01、transition过渡动画1.1、transition动画transition 过渡动画是针对CSS样式的变化，进行过渡，如width、opacity、color改变的过渡，可以实现CSS样式的平滑动态过渡动画效果。

transition 动画本身并不会主动执行，须通过其他方式触发，动画属性变化才会触发执行。常用一些伪类触发：:hover、:focus、:active（鼠标按下激活）、:target（锚点元素id）、:checked，或者JS控制CSS样式来触发动画执行。

transition过渡描述示例transition过渡动画的简写属性，包括下面这些小弟（transition /tr?n?z??(?)n/ 过渡）transition-property指定过渡动画的CSS属性名，多个,分割，默认all都生效transition-property: width;transition-duration动画时长，默认0 ，单位s、ms ， *必备transition-duration: 1s;transition-delay动画延时时长，延时执行动画transition-delay: 1s;*-timing-function指定过渡动画执行缓动曲线函数，详见后面animation章节transition-timing-function: linear;

简写属性：transiton: property duration timing-function delay

当transition-property指定的属性值变化时，就会触发动画执行，且只对该属性执行过渡动画，设置all则任意属性变化都会触发动画执行。

文章插图
如下示例分析：

页面初始加载时并不会触发动画执行。
当鼠标移入时，属性width、background-color值变化，触发了动画执行。
当鼠移出时，属性width、background-color值回到初始状态，再次触发了动画执行。

<div><button onclick="active()">动起来</button><p class="goodstudy">好好学习</p></div><style>.goodstudy {background-color: #63a9e7;width: 150px; margin: 40px 0; padding: 8px;/* 设置动画 页面加载并不会执行 */transition-property: width,background-color;transition-duration: 1s;transition-delay: 0.2s;transition-timing-function: ease-out;transition: all 1s ease-out;}.goodstudy:hover {width: 350px;background-color: red;}.active {transform: rotate(360deg);background-color: #0cdb39;transition: all 3s;}</style><script>//通过脚本添加CSS类，触发动画执行const pnode = document.querySelector('.goodstudy');function active() {pnode.classList.add('active');//执行完移除，没有事件只能定时执行移除动作setTimeout(() => {console.log('removed');pnode.classList.remove('active');}, 3000);}</script>

1.2、transform变换transform 可实现元素的各种图形变换，如缩放、旋转，及3D的变换，（transform/tr?ns?f??rm/变换）。transform 本身并不是动画，不过常用来配合transition来实现各种炫酷的变换动画效果。
transform变换函数描述示例transform元素变换，值支持下面这些函数，可设置多个值