如何正确使用关键帧动画?
Posted
技术标签:
【中文标题】如何正确使用关键帧动画?【英文标题】:How to properly use keyframes animation? 【发布时间】:2020-12-22 17:30:31 【问题描述】:我试图让 div 在页面加载时一个接一个地出现。问题是这个设置只有在我向 div 选择器添加 visibility: hidden
属性时才有效,这反过来又会反转动画。我错过了什么?
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background-color: rgb(73, 73, 73);
div
width: 15vh;
height: 15vh;
background-color: rgb(53, 53, 53);
.box1
animation: test 1s;
.box2
animation: test 1.1s;
.box3
animation: test 1.2s;
.box4
animation: test 1.3s;
.box5
animation: test 1.4s;
@keyframes test
from
visibility: hidden;
to
visibility: visible;
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
【问题讨论】:
visibility
无法设置动画。更改为opacity: 0
和opacity: 1
,你的动画就可以正常工作了。
@Turnip 这不是我想要的工作方式。我不希望它淡入,而是弹出。
正如@Turnip 所说,使用visibility
以这种方式对其进行动画处理是不可能的。见***.com/questions/27900053/…
【参考方案1】:
您需要为不透明度设置动画以使项目出现 - 您可以将长度设置为 1%,这样它只会“弹出”而不是淡入。
我还将animation-fill-mode
设置为forwards
,以便保持最终状态并使用animation-delay
设置每个盒子弹出之间的时间
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background-color: rgb(73, 73, 73);
div
width: 15vh;
height: 15vh;
background-color: rgb(53, 53, 53);
.box
opacity: 0;
animation: test 0.1s forwards;
.box1
animation-delay: 1s;
.box2
animation-delay: 1.1s;
.box3
animation-delay: 1.2s;
.box4
animation-delay: 1.3s;
.box5
animation-delay: 1.4s;
@keyframes test
0%
opacity: 0;
99%
opacity: 0;
100%
opacity: 1;
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
【讨论】:
【参考方案2】:请将visibility: hidden;
添加到每个盒子
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background-color: rgb(73,73,73);
div
width: 15vh;
height: 15vh;
background-color: rgb(53,53,53);
.box1
visibility: hidden;
animation: test 1s;
.box2
visibility: hidden;
animation: test 1.1s;
.box3
visibility: hidden;
animation: test 1.2s;
.box4
visibility: hidden;
animation: test 1.3s;
.box5
visibility: hidden;
animation: test 1.4s;
@keyframes test
from
visibility: hidden;
to
visibility: visible;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
【讨论】:
【参考方案3】:因为它是一个加载器,这里有另一个我可以建议你的高度和宽度,无限加载器:
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background-color: rgb(73,73,73);
div
width: 15vh;
height: 15vh;
background-color: rgb(53,53,53);
.box1
width : 15vh;
height: 15vh;
animation: test 1s ease 0s infinite;
.box2
width : 15vh;
height: 15vh;
animation: test 1s ease 0.2s infinite;
.box3
width : 15vh;
height: 15vh;
animation: test 1s ease 0.4s infinite;
.box4
width : 15vh;
height: 15vh;
animation: test 1s ease 0.6s infinite;
.box5
width : 15vh;
height: 15vh;
animation: test 1s ease 0.8s infinite;
@keyframes test
from
height: 15vh;
width: 15vh;
to
height: 0;
width: 0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
【讨论】:
【参考方案4】:@Pete 出色的工作。我使用“比例”而不是不透明度。谢谢!
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background-color: rgb(73,73,73);
div
transform: scale(0);
width: 15vh;
height: 15vh;
background-color: rgb(53,53,53);
.box
animation: test 0.4s forwards;
.box1
animation-delay: 0.2s;
.box2
animation-delay: 0.4s;
.box3
animation-delay: 0.6s;
.box4
animation-delay: 0.8s;
.box5
animation-delay: 1s;
@keyframes test
from
transform: scale(0);
to
transform: scale(1, 1);
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
【讨论】:
以上是关于如何正确使用关键帧动画?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 javascript 创建自定义关键帧 css 动画