基础知识
通过定义一段动画中的关键点、关键状态来创建动画。@Keyframes相比transition对动画过程和细节有更强的控制。
过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，
对过渡动画理解后再学习习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。
关键帧
使用@keyframes 规则配置动画中的各个帧
- from 表示起始点
- to表示终点
- 可以使用百分数如 20% 代表动画运行到20%处
基本使用
下面使用 @keyframes 定义了动画叫 radius 并配置了两个帧动作from/to ，然后在main:hover div中使用animation-name 引用了动画并使用animation-duration声明执行三秒。
注意：动画命名不要使用CSS关键字如 none
可以看到上面的动画是从30%的圆角过渡到了50%的圆角，但是整个动画的结束是瞬间结束，并不完美。
不要着急，下面会介绍各种方法让你的帧动画随心所欲。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ddd;
}
div {
height: 100px;
width: 100px;
background: #5352ed;
}
main:hover div {
/* 一组帧的名字 */
animation-name: radius;
/* 动画时长 */
animation-duration: 3s;
}
@keyframes radius {
from {
border-radius: 30%;
}
to {
border-radius: 50%;
}
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>
时间点
帧动画需要定义在不同时间执行的动作，开始与结束可以使用 form/to 或 0%/100% 声明。
- 必须添加百分号，25%是正确写法
- 时间点没有顺序要求，即100%写在25%前也可以
- 未设置0%与100% 时将使用元素原始状态
你可以这么理解，目前所学的一组帧动画它的运行应该是这样的
- 初始状态 —> 0% 或者 from —> 100% 或者 to —> 初始状态
所以现在看上面的动画，就知道为什么看起来比较生硬了。
物体移动
下面定义不同时间点来让物体元素移动一圈，下例中可以不设置from/to 系统将定义为元素初始状态。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 400px;
width: 400px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #ddd;
}
div {
height: 100px;
width: 100px;
background: #5352ed;
}
main:hover div {
/* 一组帧的名字 */
animation-name: move;
/* 动画时长 */
animation-duration: 3s;
}
@keyframes move {
/* 初始状态 ---> 帧 ---> 初始状态 */
25% {
transform: translate(300px, 0);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translate(0, 300px);
}
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>
同时声明
时间点可以动画样式一样时可以一起声明，下面将25%/75%背景一起声明。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 400px;
width: 400px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #ddd;
}
div {
height: 100px;
width: 100px;
background: #5352ed;
}
main:hover div {
/* 一组帧的名字 */
animation-name: move;
/* 动画时长 */
animation-duration: 3s;
}
@keyframes move {
/* 初始状态 ---> 帧 ---> 初始状态 */
25% {
transform: translate(300px, 0);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translate(0, 300px);
}
25%,
75% {
background: #ff4757;
}
50%,
100% {
background: #5352ed;
}
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>
使用动画
使用animation-name 规则可以在元素身上同时使用多个动画。
- 使用多个动画时用逗号分隔多个
- 动画有相同属性时，后面动画的属性优先使用
基本使用
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 400px;
width: 400px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #ddd;
}
div {
height: 100px;
width: 100px;
background: #5352ed;
}
main:hover div {
/* 一组帧的名字 可以使用多组帧*/
animation-name: move, radius;
/* 动画时长 */
animation-duration: 3s;
}
@keyframes move {
/* 初始状态 ---> 帧 ---> 初始状态 */
25% {
transform: translate(300px, 0);
}
50% {
transform: translate(300px, 300px);
}
75% {
transform: translate(0, 300px);
}
/* 相同设置，前者不生效 */
25%,
75% {
background: #ff4757;
}
50%,
100% {
background: #5352ed;
}
}
@keyframes radius {
25% {
border-radius: 50%;
}
50% {
border-radius: 30%;
}
75% {
border-radius: 50%;
}
/* 相同设置后者覆盖前者，所以移动时的颜色会变为下面两种 */
25%,
75% {
background: #ffa502;
}
50%,
100% {
background: #2ed573;
}
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>
动画时间
使用 animation-duration 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。
- 可以使用m秒，ms毫秒时间单位
- 可为不同动画单独设置执行时间
- 如果动画数量大于时间数量，将重新从时间列表中计算 。 如一个动画有Move,Radius,Background 而时间是1s,2s，那么Move的时间是1s，Radius的时间是2s，Background的时间从头开始数，又是1s.
效果体验
如下图的过渡时间，圆角是六秒完成，背景色是四秒完成，移动是两秒完成，但是他们的开始时间都是一样的。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: flex-start;
border: 1px solid #ddd;
}
div {
height: 100px;
width: 100px;
background: #5352ed;
}
main:hover div {
/* 一组帧的名字 可以使用多组帧*/
animation-name: radius, backgro
最低0.47元/天 解锁文章
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
