文章目录 一、动画1.1 基本使用1.2 @keyframes(关键帧) 定义动画1.3 初步使用1.4 绕圈 二、动画的常见属性2.1 解析 aniamtion-direction2.2 解析 animation-fill-mode2.3 解析 animation-timing-function2.4 打字机效果 三、动画简写属性

一、动画

动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

1.1 基本使用

制作动画分为两步：

定义动画 @keyframes使用(调用) 1.2 @keyframes(关键帧) 定义动画 @keyframes animation{ 0%{ ... } 100%{ ... } } 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100% 1.3 初步使用

页面一打开，一个DIV将从左移至右。

@keyframes move { from { transform: translateX(0px); } to { transform: translateX(1400px); } } div { width: 100px; height: 100px; background-color: teal; /* 调用动画 */ animation-name: move; /* 持续时间 */ animation-duration: 3s; } 1.4 绕圈 @keyframes move { 0% { transform: translateX(0px); } 25% { transform: translateX(1000px); } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0px, 500px); } 100% { transform: translate(0px, 0px); } } div { width: 100px; height: 100px; background-color: teal; animation-name: move; animation-duration: 3s; }

效果：

二、动画的常见属性 属性描述@keyframes规定动画animation所有动画属性的简写属性，除了 animation-play-state属性animation-name制定需要使用的动画（ 必须的 ）animation-duration规定动画完成一个周期所花费的秒或毫秒( 必须的 )animation-timing-function规定动画的速度曲线，默认是"ease"”。aniamtion-delay规定动画何时开始，默认是0.animation-iteration-count规定动画被播放的次数，默认是1,还有 infiniteanimation-direction规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放animation-play-state规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停.animation-fill-mode规定动画结束后状态，保持 forwards 回到起始 backwards 暂停动画： animation-play-state: pulsed;经常和鼠标经过等其他配合使用想要动画走回来，而不是直接跳回来： animation- direction: alternate盒子动画结束后，停在结東位置： animation- fill-mode: forwards 2.1 解析 aniamtion-direction

动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse normal 默认的reverse 从终点运动向起点 终点=>起点 alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效 2.2 解析 animation-fill-mode

动画结束后状态

aniamtion-fill-mode:forwards | backwards forwards 保持当前位置backwards 回到初始位置 2.3 解析 animation-timing-function

animation-timing- function:规定动画的速度曲线，默认是 ease、

值描述linear动画从头到尾的速度是相同的。匀速ease默认。动画以低東开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。steps指定了时间函数中的间隔数量（步长）

steps 理解为动画从头到尾，需要多少步来完成。

示例：

div { width: 0; height: 30px; background-color: teal; /* animation: move 4s linear forwards; */ /* steps 就是分几步来完成动画，有了 steps 不要写ease linear了 */ animation: move 4s steps(10) forwards; } @keyframes move { 0% {} 100% { width: 200px; } }

效果： 以此推断做一个打字机效果。

2.4 打字机效果

注意：1ch 等于一个 0 的宽度！宽度！宽度！

ch还有另一个规则：

1ch = 1个英文 = 1个数字2ch = 1个中文 <style> div { font-size: 46px; font-family: monospace; /* 1ch 代表0的宽度 */ width: 0ch; white-space: nowrap; /* animation: move 4s linear forwards; */ /* steps 就是分几步来完成动画，有了 steps 不要写ease linear了 */ animation: move 4s steps(9) forwards; overflow: hidden; } @keyframes move { 0% {} 100% { width: 18ch; } } </style> <div>我不知道你在想什么</div>

效果:

三、动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太;

示例： animation:move 1s ease 2s 3 alertnate fowwards

@keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); } } div { width: 100px; height: 100px; background-color: teal; /* 动画名称 */ /* animation-name: move; */ /* 持续时间 */ /* animation-duration: 2s; */ /* 速度曲线 */ /* animation-timing-function: ease-in; */ /* 何时开始:延迟一秒 */ /* animation-delay: 1s; */ /* 重复次数 */ /* animation-iteration-count: 2; */ /* 是否逆向播放 */ /* animation-direction: alternate-reverse; */ /* 结束后状态 */ /* animation-fill-mode: forwards; */ animation: move 2s linear 0s infinite alternate forwards; } /* 鼠标经过暂停动画 */ div:hover{ animation-play-state: paused; } 简写属性里面不包含 animation- play-state

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。