CSS3动画
动画概述
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡(过渡可以说是一种简单的动画)，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本规则
制作动画分为两步：
- 先定义动画
- 在使用(调用)动画
首先定义动画，我们使用keyframes(类似定义类选择器)
keyframes译为关键帧，所以也叫关键帧动画
语法结构：
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这里的0%和100%有专门的名字 – 动画序列
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词
from和to，等同于0%和100%
接下来是元素使用动画，在使用的时候有两个属性是必不可少的：
语法结构：
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间; /* 记得带单位 */
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
动画的基本使用
现在我们来做一个小案例：一打开网页，一个红色的盒子就从左边飞到右边。
这里我们需要用到CSS3 2D转换中的translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
代码实现如下：
<style>
div {
width: 200px;
height: 200px;
background-color: red;
animation-name: move;
animation-duration: 2s;
}
/* @keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
} */
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(1000px);
}
}
/* 这两种写法都可以 */
</style>
<body>
<div></div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
利用动画序列完成多个状态的实现
我们现在有一个新需求，还是刚才那个盒子，但是我们想让他围着浏览器窗口走一圈，这我们怎么去实现呢？
原理图：
代码实现：
<style>
div {
width: 200px;
height: 200px;
background-color: red;
animation-name: move;
animation-duration: 5s;
}
@keyframes move {
0% {
transform: translate(0px,0px);
}
25% {
transform: translate(1000px,0px);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0px,500px);
}
100% {
transform: translate(0px,0px);
}
}
</style>
<body>
<div></div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
其实0%那个可以省略，或者干脆就空着：
如何理解百分比来规定变化发生的时间？
比如说在我们这个案例中，有五个状态，动画总时间为5秒钟
0% 意味着 5 X 0% = 0s 的时候 动画处于第一状态
25% 意味着 5 X 25% = 1.25s 的时候 动画处于 第二状态
50% 意味着 5 X 50% = 2.5s 的时候 动画处于 第三状态
75% 意味着 5 X 75% = 3.75s 的时候 动画处于 第四状态
100% 意味着 5 X 100% = 5s 的时候 动画处于 第五状态
注意这个百分比必须为整数！
CSS3动画常见属性
动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation: myfirst 5s linear 2s infinite alternate;
- 1
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
- 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards
有关速度曲线
animation-timing-function：规定动画的速度曲线，默认是“ease”
其中这个steps()不同于上面五种，它不是一种连续平滑的效果，而是一种状态的切换(类似于断点)
效果代码：
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让我们的文字强制一行内显示 */
white-space: nowrap;
/* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
<body>
<div>CSDN我在这里等你</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/125577539
- 点赞
- 收藏
- 关注作者
评论（0）