transition 过渡动画与 animation 自定义动画

您所在的位置：网站首页 › css动画的实现方法有哪些 › transition 过渡动画与 animation 自定义动画

transition 过渡动画与 animation 自定义动画

2024-07-14 22:44| 来源: 网络整理| 查看: 265

# transition 过渡动画与 animation 自定义动画

TIP

transition 过渡动画、animation 自定义动画，无论在 PC 端、还是移动端项目开发中都是高频常用的动画，对于交互体验的提升都有很大的帮助。因此，学好动画相关知识及灵活应用就非常重要。

# 一、transition 过渡动画

如何理解过渡动画？

一个元素由 A 状态经过一段时间变化成 B 状态，我们只需要定义其开始和结束的状态，而他的中间的状态会自己添加“补间动画”。如下图：

以前，网页的特效基本都是由 JavaScript 定时器实现的，现在逐步改为使用 CSS3 过渡优点：动画更细腻，内存开销小兼容性：移动 PC 都兼容，但是需要加上对应的浏览器前缀

过渡动画何时发生？

当属性值发生变化时，才会触发 transition 动画 transition 动画主要与:hover 配合，来实现鼠标滑动动画效果 # 1、transition 基本语法

语法

/* [] 表示这个值，可以省略不写 css属性名过渡时间时间函数延迟时间 */ transition: transition-property transition-duration [transition-timing-function] [transition-delay]; 属性描述 transition-property 指定 CSS 属性的 name，哪些属性要过渡 transition-duration transition 效果需要指定多少秒或毫秒才能完成，动画时间 transition-timing-function 指定 transition 效果的转速曲线，变化曲线 transition-delay 定义 transition 效果开始的时候（延迟时间）

用法

/* width : 过渡属性为width 1s : 动画时长1秒 linear : 直线匀速动动 0s : 延迟时间,不延迟 */ transition: width 1s linear 0s; transition: width 1s; transition: width 1s linear; transition: width 1s 2s;

实际应用

div { width: 100px; height: 100px; background: tomato; /* transition：定义过渡动画 border-radius：过渡的css属性 1s ：动画过渡时间 ease：速度慢快慢 0s ：延迟时间0s */ transition: border-radius 1s ease 0s; margin: 50px 10px; } .box:hover { border-radius: 50%; }

# 2、可参于过渡的属性

可参于过渡的属性

所有数值类型的属性，都可以参与过渡比如：width、height、left、top、border-radius、font-size、opacity 背景颜色和文字都可以被过渡所有的变形（包括 2D 和 3D）都能被过渡，在 CSS 中 90%的属性都可以被过渡

不能参与过渡动画的属性

float 和 position 不能 display 无法过渡 font-family 等 /* 错误用法 display属性是不可以参于过渡动画的 */ transition: display 1s ease 0s; # 3、all 这个特殊属性

TIP

需要所有属性参与过渡，即定义为 all all 属性不要随意使用，会引发效率问题，如果只需要某一个属性过渡，还是要指定特定的属性 /* all: 所有属性 1s: 动画过渡时间为1s linear: 匀速动动 0s: 动画延迟时间0s */ transition: all 1s linear 0s;

应用

.box { width: 100px; height: 100px; background-color: salmon; border-radius: 0; /* all: 所有能过的渡的属性，发生改变时，都会发生过渡效果 1s: 动画过渡时间为1s linear: 动画习速运动 0s: 延迟时间 */ transition: all 1s linear 0s; } .box:hover { /* 宽、高、背景颜色、圆角都是可过渡属性，所以鼠标滑动后，都能呈现过渡变化效果 */ width: 200px; height: 300px; background-color: skyblue; border-radius: 50%; }

# 4、定义多个过渡动画

TIP

多个过渡动画之间用 ,（逗号）隔开

语法

transition: 属性过渡时间时间函数延迟时间, 属性过渡时间时间函数延迟时间, 属性过渡时间时间函数延迟时间;

应用

.box { width: 100px; height: 100px; background-color: red; opacity: 1; /* 动画1：宽度变化动画2：延迟1s后，高度发生变化动画3：延吃2s后，透明度发生变化 */ transition: width 1s linear 0s, height 1s ease 1s, opacity 1s linear 2s; } /* 鼠标滑动后，改变宽，高，透明度 */ .box:hover { width: 200px; height: 200px; opacity: 0.2; }

# 5、过渡的四个小属性

TIP

前面我们学过 transition 这个属性，本质上 transition 这个属性是以下四个小属性的复合写法。

属性描述 transition-property 指定 CSS 属性的 name，哪些属性要过渡 transition-duration 指定动画多少秒或毫秒才能完成，动画执行时间 transition-timing-function 时间函数，指定动画转速曲线，即变化的速度 transition-delay 指定动画开始前，需要的延迟时间多个值之间用 ,（逗号）隔开，没有指定的值，以属性的第一个值为准 transition-property: width, height; transition-duration: 1s, 2s; transition-timing-function: linear; transition-delay: 0s, 1s; 小属性主要是用来层叠大属性用的。 .box { width: 100px; height: 100px; background-color: red; opacity: 1; /* all: 所有能参于过渡的属性，都可参与过渡动画 1s: 过渡时间1s */ transition: all 1s; /* 过渡属性: 宽,高，不透明度 */ transition-property: width, height, opacity; /* 过渡时间： width 1s height 2s opacity 1s */ transition-duration: 1s, 2s; /* 过渡延迟时间： 0s：width宽过渡时间 1s：height高过渡时间 2s：opacity不透明度过渡时间 */ transition-delay: 0s, 1s, 2s; } .box:hover { width: 200px; height: 200px; opacity: 0.2; }

# 6、时间函数

TIP

时间函数（transition-timing-function），管理着动画在单位帧内播放的速度曲线

时间函数的预设值

值描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

常用参数

横轴表示时间，纵轴表示变化量 .越斗表示运动速度越快。

贝塞尔曲线

官方网址：https://cubic-bezier.com/ (opens new window) 可以在线生成贝塞尔曲线，可以自定义动画时间函数

我们可以右击审查元素，在代码的控面板当中来调整贝塞尔曲线，来调节运动速度，如下 .box { width: 100px; height: 100px; background-color: red; /* 过渡动画 */ transition: width 1s linear; } .box:hover { width: 200px; }

# 二、transition 过渡动画实战案例

TIP

项目中常用的动画实践案例

# 1、鼠标滑动，背景从透明到半透明效果

点击查看完整源代码 .box { width: 200px; height: 200px; position: relative; } .box img { width: 200px; height: 200px; /* 图片填充方式:图片等宽高覆盖内容框 */ object-fit: cover; } .box::after { /* 绝对定位 */ position: absolute; top: 0; bottom: 0; right: 0; left: 0; content: ""; /* 背景颜色完全透明刚开始看不到*/ background-color: rgba(0, 0, 0, 0); /* 过渡动画*/ transition: background-color 1s; } .box:hover::after { /* 背景颜色不透明度为0.5 */ background-color: rgba(0, 0, 0, 0.5); } # 2、鼠标滑动，文字从下往上滑动效果

点击查看完整源代码 body, p { margin: 0; } .box { width: 200px; height: 200px; position: relative; /* 超出部分隐藏 */ overflow: hidden; } .box img { width: 200px; height: 200px; /* 图片等宽高填充内容区 */ object-fit: cover; } .box p { /* 绝对定位 */ position: absolute; left: 0px; /* 最开始定位到父元素外边看不到 */ bottom: -35px; width: 100%; height: 35px; line-height: 35px; text-align: center; color: #fff; background-color: rgba(0, 0, 0, 0.5); /* 过渡动画 */ transition: bottom 0.5s; } .box:hover p { bottom: 0px; } 上帝散落的光 # 3、商城右侧通栏导航

点击查看完整源代码 /* 清除默认样式 */ body { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* 侧边栏固定定位在浏览器最右边 */ .siderbar { width: 5px; height: 100%; position: fixed; top: 0; right: 0; background-color: #666; } .siderbar ul { width: 50px; height: 208px; /* background-color: red; */ /* 绝对定位在侧边栏垂直居中位置 */ position: absolute; left: -50px; top: 50%; margin-top: -104px; } .siderbar ul li { width: 50px; height: 50px; margin: 2px 0px; background-color: #666; /* 相对定位 */ position: relative; } .siderbar ul li i { display: block; width: 50px; height: 50px; background-color: #666; position: absolute; top: 0; left: 0; font-size: 24px; text-align: center; line-height: 50px; color: #fff; } .siderbar ul li span { display: block; /* 最开始隐藏不见，即width为0，同时overflow:hidden */ width: 0px; overflow: hidden; height: 50px; /* 相对li绝对定位，元素的最右边与li的最左边对齐 */ position: absolute; top: 0; right: 50px; background-color: #666; color: #fff; /* 文字首行缩进20px */ text-indent: 20px; line-height: 50px; /* 宽度过渡动画效果 */ transition: width 1s; } .siderbar ul li:hover i { background-color: red; } /* 鼠标滑动到li ，改变span的宽和背景颜色*/ .siderbar ul li:hover span { width: 120px; background-color: red; } 联系客服京东会员购物车优惠券 # 三、animation 自定义动画

TIP

我们需要使用自定义动画，需要分两步：

第一步是：定义动画第二步是：调用动画 # 1、动画的定义

使用`@keyframes`关键帧来定义动画

建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您可以多次更改 CSS 样式的设定。动画执行各阶段时间，可以通过百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"。 from 和 to 等价于 0% 和 100%。from 和 0% 是动画的开始时间，to 和 100% 动画的结束时间。 @keyframes 动画名 { /* 起始状态 */ from { 样式 } /* 结束状态 */ to { 样式 } } /* 或 */ @keyframes 动画名 { /* 起始状态 */ 0% { 样式 } /* 结束状态 */ 100% { 样式 } }

定义一个动画

/* @keyframes 表示定义动画 changeBox:动画的名字 0% ：表示起始状态 100% :表示结束状态 */ @keyframes changeBox { 0% { width: 200px; height: 200px; } 100% { width: 400px; height: 400px; } } # 2、调用动画

TIP

动画定义好之后，我们需要使用 animation 属性来调用动画

animation: 动画名动画完成时间时间函数延迟时间; /* changeBox 动画的名字 1s 总时长 linear 缓动效果 0s 延迟时间 */ animation: changeBox 1s linear 0s;

案例

点击查看完整源代码 .box { width: 50px; height: 50px; background-color: red; /* 调用动画：动画名动画执行时间; */ animation: changeBox 5s; } /* 定义动画动画名为 changeBox */ @keyframes changeBox { /* 0% { width: 50px; height: 50px; } 100% { width: 200px; height: 200px; } */ /* 起始状态 */ from { width: 50px; height: 50px; } /* 结束状态 */ to { width: 200px; height: 200px; } }

# 3、多关键帧动画

TIP

用百分比%，分别表示动画执行的时间节点

点击查看完整源代码 .box { width: 100px; height: 100px; background-color: aqua; position: absolute; /* 调用动画 mymove 动画名 4s 动画执行时间 ease 动画速度 0s 动画延迟时间 */ animation: mymove 4s ease 0s; } @keyframes mymove { /* 起始状态 0s */ 0% { top: 0px; left: 0px; background: red; } /* 1秒后 */ 25% { top: 0px; left: 100px; background: blue; } /* 2秒后 */ 50% { top: 100px; left: 100px; background: yellow; } /* 3秒后 */ 75% { top: 100px; left: 0px; background: green; } /* 4秒结束状态 */ 100% { top: 0px; left: 0px; background: red; } }

# 4、animation 完整写法

TIP

animation 这个属性，相当于是下面表格中所有属性的复合写法。

语法

animation: 动画名动画完成时间时间函数延迟时间播放次数是否返向播放动画不播放或完成时的状态动画是否正在运行或已暂停; 属性说明属性值 animation-name 指定应用的一系列动画名，即@keyframes 定义的动画名 none 表示不调用动画动画名：由大小写敏感的字母 a-z、数字 0-9、下划线 (_) 和/或横线 (-) 组成。不能以数字开头 animation-duration 指定动画周期时长，需要多少秒或毫秒完成默认值为 0s，表示无动画。时长单位为秒（s)或者毫秒（ms）如: 1s ，2s animation-timing-function 设置动画将如何完成一个周期 linear（直线匀速） ease（慢-快-慢） ease-in（慢-快） ease-out（快-慢） ease-in-out（慢-快-慢）贝塞尔函数表示 cubic-bezier(0.84,-0.21, 1,-0.15) steps(n,start|end) animation-delay 设置动画在启动前的延迟间隔时间默认值为 0s,表示立即执行时长单位为秒（s)或者毫秒（ms）如: 1s ，2s animation-iteration-count 定义动画的播放次数。 n：一个数字，动画播放次数infinite：无限次播放 animation-direction 指定是否应该轮流反向播放动画。 normal：默认值。动画正常播放reverse :动画反向播放，动画按步后退的效果 alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse : 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards: 在动画结束后，动画将停止在最后结束的状态backwards:both : 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性 animation-play-state 指定动画是否正在运行或已暂停。 paused 暂停动画 running 正在运行动画

① animation-iteration-count 动画播放次数

n：一个数字，动画播放次数 infinite：无限次播放 .box { width: 100px; height: 100px; background-color: skyblue; position: absolute; left: 0; top: 0; /* 动画名执行时间匀速延迟0s 执行2次*/ /* animation: mymove 2s linear 0s 2; */ /* infinite 无限循环 */ animation: mymove 2s linear 0s infinite; } @keyframes mymove { 0% { top: 0; left: 0; } 50% { top: 0px; left: 200px; } 100% { top: 200px; left: 200px; } }

② animation-direction 指定是否应该轮流反向播放动画

normal：默认值。动画正常播放 reverse :动画反向播放，动画按步后退的效果 alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse : 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 .box { width: 100px; height: 100px; background-color: skyblue; /* 绝对定位 */ position: absolute; left: 0; top: 0; /* 动画名执行时间匀速延迟0s 播放次数2次奇数次正向播，偶数反向播 */ animation: mymove 2s linear 0s 2 alternate; } @keyframes mymove { /* 0s 开始 */ 0% { top: 0; left: 0; } /* 1s 后*/ 50% { top: 0px; left: 200px; } /* 2s 后*/ 100% { top: 200px; left: 200px; } } reverse alternate alternate-reverse

③ animation-fill-mode 动画不播放或完成或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards: 在动画结束后，动画将停止在最后结束的状态 backwards:在动画结束后，动画将停止在最开始的状态 both : 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性 .box { width: 100px; height: 100px; background-color: skyblue; position: absolute; left: 0; top: 0; /* 动画名执行时间匀速延迟0s */ animation: mymove 2s linear 0s 2 forwards; } @keyframes mymove { 0% { top: 100px; left: 0; color: yellow; } 50% { top: 0px; left: 200px; } 100% { top: 200px; left: 200px; } } 我是大美人 forwards backwards

④ animation-play-state 指定动画是否正在运行或已暂停

属性值说明 paused 暂停动画 running 正在运行动画

animation-play-state通常与:hover配合来使用，当鼠标滑动上去时，可以暂停或开启动画

.box { width: 100px; height: 100px; background-color: skyblue; position: absolute; left: 0; top: 0; /* 动画名执行时间匀速延迟0s */ animation: mymove 5s linear 0s 1; } @keyframes mymove { 0% { top: 0; left: 0; color: yellow; } 50% { top: 0px; left: 200px; } 100% { top: 200px; left: 200px; } } /* 鼠标滑动上去,暂停动画执行 */ .box:hover { animation-play-state: paused; }

# 5、animation 指定多组动画

TIP

animation 属性用来指定一组或多组动画，每组之间用**逗号 , **相隔。

animation: move1 2s, bgcolor 2s 2s forwards; .box { width: 100px; height: 100px; background-color: skyblue; /* move1 :动画1 执行时间2s bgcolor:动画2 执行时间2s 延迟2s执行,执行后动画停止在结束的状态 */ animation: move1 2s, bgcolor 2s 2s forwards; } @keyframes move1 { 0% { width: 100px; height: 100px; } 100% { width: 200px; height: 200px; } } @keyframes bgcolor { 0% { width: 200px; height: 200px; background-color: khaki; } 100% { background-color: red; } }

# 6、steps 帧动画

TIP

steps 定义一个动画从开始到结束，动画的每一帧中经历的步数

语法

/* n: 整数，表示分几步执行完 start：开始是在第一帧动画结束的位置 end：开始是在第一帧动画开始的位置 */ steps(n,start|end) body { margin: 0; } .box { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 0; left: 0; /* 分五步,第一步在第一帧结束的位置 */ animation: move 5s steps(5, start); } @keyframes move { 0% { left: 0; } 100% { left: 500px; } } /* 这个是用来做参考的,参考500px的位置在哪里 */ .box2 { width: 500px; background-color: red; height: 20px; } steps(5,end) steps(5,start)

steps 的特殊性

steps是设置的每一步动画的跳跃步数，而不是整个动画的跳跃步数，具体看下面这个案例

body { margin: 0; } .box { width: 100px; height: 100px; background-color: rgb(138, 210, 238, 0.5); position: absolute; top: 0; left: 0; /* 分五步,第一步在第一帧结束的位置 */ animation: move 5s steps(5, start); } @keyframes move { 0% { left: 0; } 50% { left: 100px; } 100% { left: 500px; } } /* 这个是用来做参考的,参考500px的位置在哪里 */ .box2 { width: 500px; background-color: red; height: 20px; } /* 这个是用来做参考的,参考100px的位置在哪里 */ .box3 { width: 100px; background-color: khaki; height: 10px; }

steps 帧动画实战案例

html, body { margin: 0; padding: 0; } .box { width: 184px; height: 325px; margin: 50px auto; background-image: url("images/people.png"); background-repeat: no-repeat; background-position: 0px 0px; animation: move 1s steps(8, end) 0s infinite; } @keyframes move { 0% { background-position: 0px 0px; } 100% { background-position: -1472px 0px; } } # 7、transition 与 animation 的区别

区别

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 @keyframe 结合可以设置中间帧的一个状态 2、animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发 3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次； 4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧（开始和结束）； # 四、animate.css 动画库

TIP

animate.css 是非常强大的跨平台的预设 css3 动画库内置了很多典型的 css3 动画，兼容性好使用方便 animate.css 官网：https://animate.style/ (opens new window) # 1、深入学习 animate.css 动画库官网

TIP

点击网站 (opens new window) 右侧的导航，就能显示出对应的动画效果，如下图：

如果国外网站打不开，可以去 BootCDN 下载，往后看，我在后面提供了 BootCDN 的相关的操作步骤。

# 2、下载 animate.css 文件

# 3、在页面引入 animate.css 文件 # 4、选择对应动画效果应用

TIP

在网站的右侧选择你需要的效果，然后把对应的效果应用到自己的元素上。需要应用那个样式效果，在需要应用的元素上加 .animate__animated和需要的效果样式名就 ok 效果的样式名，在英文官网的样式标题上有个复制的小按扭，点击小按扭复制就可以获得

# 5、BootCDN 上下载 animate.css 文件

TIP

BootCDN 官网地址：https://www.bootcdn.cn/ (opens new window)

# 五、专项案例训练（作业）

根据课程进度完成以下针对性案例开发，开发过程要求：

利用 PS（Photoshop）与 PxCook 结合，在 PS 中的找到 PxCook-切图面板，选中想要切图的图层或者图层组，然后点击切图面板上的标记为切图按钮 -> 再导出到 PxCook 在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸，到具体的开发过程，包括平时自学中如果没有 PSD 源文件时，PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中（更多是团队协作开发，流程如下）

设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖（国内企业用的多）中前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后，会有 3 大项目开发（PC 端，响应式，移动端）会按照企业真实团队协作的方式，用 3 个项目来完整的实践。

PSD 的源文件设计稿（联系助理老师获取即可）

具体操作步骤讲解，在钉钉群直播回放视频（第十二课：CSS 盒子模型）中可查阅

切记

学习阶段一定要按照以上的流程学习，提前熟悉工具和整个开发步骤，企业真实项目开发就是这样的流程

# 1、CSS3 网站全屏加载动画

点击查看完整版视频讲解上次更新时间: 4/4/2024, 7:54:56 PM

← 圆角、阴影、文本图像处理、CSS 函数 transform 2D 与 3D 转换 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

【本文地址】

transition 过渡动画与 animation 自定义动画

transition 过渡动画与 animation 自定义动画

今日新闻

推荐新闻