我需要将红色方块的大小从比例 (100) 调整为比例 (1)。但是现在,在动画开始时它的比例是 1,然后才开始增加到 100。我可以让红色框块在动画开始时不以其原始大小显示吗?
https://codepen.io/alex-filippovich/pen/ExeJEEP
.container .box {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.container .box {
-webkit-animation-name: hideit;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes hideit {
0% {
display: none;
transform: scale(10)
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="container">
<div class="box"></div>
</div>
首先,了解动画需要 1 秒才能开始,因为您使用了 1 秒的延迟。如果你删除动画开始时隐藏的块。
但是如果你想保持延迟,将规则
display: none
添加到.container .box
选择器并将display: block
添加到动画的50%和100%步骤。
将框设置为
opacity: 0;
并使用opacity: 1;
开始动画
.container .box {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
opacity: 0;
}
.container .box {
-webkit-animation-name: hideit;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes hideit {
0% { opacity: 1; transform: scale(10) }
50% { opacity: 1; }
100% { opacity: 0; }
}
<div class="container">
<div class="box"></div>
</div>