【前端(十)】CSS 过渡与动画笔记

文章目录1. 过渡transition1.1 过渡的触发1.2 transition 写在哪里1.3 过渡相关属性transition-propertytransition-durationtransition-delaytransition-timing-functiontransition 复合属性1.4 过渡体验示例2. 动画animation2.1 什么是关键帧2.2 动画的基本使用2.3 动画相关属性animation-nameanimation-durationanimation-delayanimation-timing-functionanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-stateanimation 复合属性2.4 动画体验示例3. 过渡与动画对比总结1. 过渡transition简单来说过渡就是让元素从一种样式平滑地转变为另一种样式。CSS 的属性值默认是“啪”一下直接切换的比如一个方块从红色变成蓝色瞬间完成没有任何中间状态。一旦加上了transition这个变化就会像动画一样平滑地“过渡”过去比如用 0.3 秒慢慢从红色变成蓝色。1.1 过渡的触发过渡发生的前提是属性值发生了变化。只要有属性值改变并且在该元素上声明了transition浏览器就会自动对这次变化进行平滑过渡。那属性值怎样才会变化呢最常见的就是通过用户操作触发例如鼠标悬停:hover元素获得焦点:focus元素被激活:active通过 JavaScript 修改元素的类名或内联样式有些人认为“只有伪类才能触发过渡”这其实是一种常见误解。伪类:hover、:focus等只是最直观的触发方式任何导致属性值变化的手段都可以触发过渡包括用 JS 修改样式。所以可以这样理解过渡 属性值变化 transition 声明。没有属性变化过渡就不会发生没有 transition 声明变化就是一瞬间完成。1.2 transition 写在哪里我们需要把transition写在元素的基础样式中。“基础样式”就是元素在默认状态下的样式比如未被:hover、:active等触发时的样子。如下是正确示例.button{background-color:blue;/* 基础样式背景蓝色 */color:white;/* 基础样式文字白色 */transition:all 0.3s;/* 过渡写在基础样式里 */}/* 触发过渡的状态这里是鼠标悬停 */.button:hover{background-color:red;/* 改变背景 */color:black;/* 改变文字颜色 */}这样写可以保证过渡效果双向工作鼠标移入时属性从基础值过渡到:hover中的值鼠标移出时属性再从:hover值平滑回到基础值。如果只把transition写在:hover里移入时有过渡移出时属性会瞬间跳回原值没有平滑过程体验很不流畅。1.3 过渡相关属性transition-property作用指定哪些属性需要过渡。只有这里定义的属性如宽、高、颜色等才会以平滑过渡方式变化。常用值none不过渡任何属性。all过渡所有能过渡的属性。具体某个属性名例如width、height若有多个以逗号分隔。不是所有 CSS 属性都能过渡。值为数字或者值能转换为数字的属性通常都支持过渡否则不支持。常见支持过渡的属性颜色、长度值、百分比、z-index、opacity、2D 变换属性、3D 变换属性、阴影。transition-duration作用设置过渡的持续时间即从一个状态过渡到另一个状态需要多久。常用值0没有任何过渡时间 ——默认值。s或ms秒或毫秒如0.3s、300ms。列表形式如果想让所有属性都持续相同时间就写一个值如果想让不同属性持续不同时间可以写一个时间列表与transition-property一 一对应。transition-delay作用指定开始过渡的延迟时间单位s或ms默认值为0。同样支持列表与属性一 一对应。transition-timing-function作用设置过渡的速度曲线也就是变化过程的“节奏”。常用值ease平滑过渡 ——默认值linear线性过渡匀速ease-in慢 → 快ease-out快 → 慢ease-in-out慢 → 快 → 慢step-start等同于steps(1, start)step-end等同于steps(1, end)steps(integer, [start|end])步进函数。第一个参数为正整数指定步数第二个参数为start或end决定每一步值变化的时间点默认为end。cubic-bezier(number, number, number, number)自定义贝塞尔曲线。在线制作贝塞尔曲线https://cubic-bezier.comsteps() 函数详解步数正整数表示将动画分成几个“台阶”。例如步数为 3函数值会分成 3 段阶梯状的恒定值。变化时间点start或end决定每个台阶的“新值”是从这一步的开头生效还是从末尾生效。默认是end。示例假设步数 3steps(3, end)默认第 1 步时间区间 [0, 1) → 值为 V1第 2 步时间区间 [1, 2) → 值为 V2第 3 步时间区间 [2, 3] → 值为 V3解释每一步的“新值”在这一步的末尾才出现。变化发生在每个整点时刻的右侧前一步的值一直保持到这一步结束。steps(3, start)第 1 步时间区间 [0, 1] → 值为 V1第 2 步时间区间 (1, 2] → 值为 V2第 3 步时间区间 (2, 3] → 值为 V3解释每一步的“新值”在这一步的开头立即生效。变化发生在每个整点时刻的左侧一到时间点就切换为新值。简单记忆end就是等一步走完再切换start是一步开始就立刻切换。transition 复合属性可以将上述所有子属性合并成一个transition声明。规则如果只设置一个时间它表示duration如果设置两个时间第一个是duration第二个是delay其余值属性名、timing-function无顺序要求。示例transition:1s 1s linear all;/* 对应duration1s, delay1s, timing-functionlinear, propertyall */1.4 过渡体验示例!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title过渡/titlestyle.outer{width:777px;background-color:pink;}.inter{width:111px;height:111px;background-color:rgb(255,76,106);transition-property:all;transition-duration:5s;transition-delay:2s;}.inter:hover{background-color:rgb(92,255,171);transform:translate(666px);}/style/headbodydivclassouterdivclassinter/div/div/body/html效果鼠标悬停后方块会延迟 2 秒然后用 5 秒平滑改变背景色并向右平移 666px移开鼠标时同样平滑返回。2. 动画animation2.1 什么是关键帧不知道大家是否看过这样一段视频画了好几页画然后连续快速翻动画中的人物就像动了起来。一段动画本质上就是在一段时间内连续播放若干张静态画面每一张画面我们叫一“帧”。一定时间内连续快速播放若干个帧就成了人眼中看到的动画。同样时间内播放的帧数越多画面看起来越流畅。在构成一段动画的若干帧中起到决定性作用的几帧就叫做关键帧。浏览器会自动计算关键帧之间的过渡画面。2.2 动画的基本使用与过渡不同动画是主动展现的不需要用户操作就可以自动运行而且可以在多个关键帧之间精细控制。过渡 vs 动画的初步对比过渡被动触发依赖属性变化通常由操作触发只有开始和结束两种状态适合简单的效果切换。动画可以自动运行可定义多个关键帧适合复杂的、连续的动态效果。第一步定义关键帧定义动画方式一简单定义from/tokeyframes动画名{from{/* 起始状态属性 */}to{/* 结束状态属性 */}}方式二完整百分比定义keyframes动画名{0%{/* ... */}20%{/* ... */}40%{/* ... */}60%{/* ... */}80%{/* ... */}100%{/* ... */}}第二步给元素应用动画将定义好的关键帧通过以下属性应用到具体元素上。2.3 动画相关属性animation-name作用指定元素要使用的动画对应keyframes的名称。animation-duration作用设置动画完成一个周期所需的时间。不设置时间则使用默认值0s不会有任何动画效果元素会瞬间切换到最终状态这和过渡不设置duration一样直接跳变。animation-delay作用设置动画开始前的延迟时间单位s或ms默认0。示例.box{animation-name:testKey;animation-duration:5s;animation-delay:0.5s;}animation-timing-function作用设置动画的速度曲线与过渡中的transition-timing-function用法完全相同。常用值ease平滑 ——默认值linear线性ease-in慢 → 快ease-out快 → 慢ease-in-out慢 → 快 → 慢step-start等同于steps(1, start)step-end等同于steps(1, end)steps(integer, [start|end])步进函数详细解释见过渡部分两者完全相同cubic-bezier(number, number, number, number)自定义贝塞尔曲线animation-iteration-count作用指定动画的播放次数。常用值number具体播放次数如1、2、3…infinite无限循环animation-direction作用指定动画的播放方向。常用值normal正常方向默认reverse反方向运行alternate先正常运行再反方向运行并持续交替alternate-reverse先反方向运行再正方向运行并持续交替animation-fill-mode作用设置动画执行前后元素如何应用样式即动画之外的状态。常用值none默认值动画前后都不保留动画中的样式forwards动画结束后元素保持最后一帧的样式backwards在动画延迟期间元素就应用第一帧的样式both同时应用forwards和backwards的规则示例.box{width:100px;height:100px;background:blue;transform:scale(1);/* 默认大小 */animation-name:grow;animation-duration:2s;animation-delay:1s;animation-fill-mode:both;/* 试试换成 none / backwards / forwards */}keyframesgrow{from{transform:scale(0.5);/* 第一帧缩小 */}to{transform:scale(1.5);/* 最后一帧放大与默认 scale(1) 不同 */}}none延迟期保持 scale(1)动画结束跳回 scale(1)。backwards延迟期立即变为 scale(0.5)动画结束跳回 scale(1)。forwards延迟期保持 scale(1)动画结束后保持 scale(1.5)。both延迟期立即变为 scale(0.5)动画结束后保持 scale(1.5)。animation-play-state作用控制动画的播放状态。常用值running播放默认paused暂停注意animation-play-state一般不写在复合属性里而是单独使用便于通过伪类或 JavaScript 动态控制播放/暂停。animation 复合属性和过渡类似也可以把所有动画子属性合并成一个animation声明。规则只设置一个时间表示duration设置两个时间第一个是duration第二个是delay其他值无顺序要求。示例.inner{animation:change 3s 0.5s linear 2 alternate-reverse forwards;}2.4 动画体验示例!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title动画/titlestyle.outer{width:777px;background-color:pink;}.inter{width:111px;height:111px;border-radius:50%;background-color:rgb(255,76,106);animation-name:change;animation-duration:5s;animation-direction:alternate;}keyframeschange{from{}to{background-color:rgb(92,255,171);transform:translate(666px);}}/style/headbodydivclassouterdivclassinter/div/div/body/html这个例子中圆形元素会自动开始动画。3. 过渡与动画对比总结特性过渡transition动画animation触发方式需要属性值发生变化通常由:hover、JS 等触发可自动运行也可通过类名控制状态定义只有起始和结束两个状态隐式通过keyframes定义多个关键帧0%100%循环播放不能自动循环需反复触发可设置animation-iteration-count支持无限循环播放方向无反向控制支持normal、reverse、alternate等播放/暂停无法暂停只能在触发后等待完成可通过animation-play-state控制结束状态默认回到初始值通过animation-fill-mode控制是否保持结束状态适用场景简单的悬停、聚焦等状态切换复杂的动画序列、循环动画、自动演示以上为个人学习总结旨在梳理个人理解。如有疏漏或不当之处欢迎指正与交流。