文章目录

一、动画
- 1.1 基本使用
- 1.2 @keyframes(关键帧) 定义动画
- 1.3 初步使用
- 1.4 绕圈
二、动画的常见属性
- 2.1 解析 aniamtion-direction
- 2.2 解析 animation-fill-mode
- 2.3 解析 animation-timing-function
- 2.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,还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停.
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards

暂停动画： animation-play-state: paused;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来： 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

超详细 CSS动画-animation相关推荐

css动画animation详细解读
以一个小球为例向右匀速运动200px 然后再移动回来,然后再移动到200px处停在那里效果如下 div{width:40px;height:40px;border-radius:50%; ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
HTML5 CSS动画 animation使用
首先看一下页面的布局 <body><div class="box1"><div class="box2"></div& ...
css动画 animation
今天用css做了一个简单的三角上下移动的一个小动画,说白了就是在改变该物体的height值.除了这个方法,还可以用js. 一.在用css写动画时,一定要记住兼容性问题.如何解决该兼容性?在前面加内核前 ...
css动画 animation
1. 线性渐变线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色 ...
css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
超详细！动画图解「合并 K 个排序链表」
点击蓝色"五分钟学算法"关注我哟加个"星标",天天中午 12:15,一起学算法作者 | 李威来源 | 五分钟学算法今天分享的题目来源于 LeetCode ...
CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
保姆级教程 CSS 知识点梳理大全，超详细！！！
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...

超详细 CSS动画-animation