<分区>
标签 css
你能告诉我如何为伪类设置动画:after 和:before，所以第一个是:after 和然后:before。我正在尝试使用动画延迟，但它无法正常工作。
代码:
.front {
transform-style: preserve-3d;
width: 108px;
height: 100px;
background: blue;
position: absolute;
left: 180px;
top: 160px;
margin: 4px 0 0 12px;
cursor: pointer;
}
.front:before {
content: "";
position: absolute;
top: 15px;
bottom: 0;
left: 18px;
right: 0;
z-index: 2;
background: url("https://appspowerplaymanager.vshcdn.net/images/biathlonmania/events/akropolis/lucky-pick/bg-lucky-pick-cancel-before.png") left top no-repeat;
animation: crossHeight 0.5s;
// animation-delay: 1s;
}
.front:after {
content: "";
position: absolute;
top: 15px;
bottom: 0;
left: 18px;
right: 0;
z-index: 2;
background: url("https://appspowerplaymanager.vshcdn.net/images/biathlonmania/events/akropolis/lucky-pick/bg-lucky-pick-cancel-after.png") left top no-repeat;
animation: crossHeight 0.5s;
//animation-delay: 2s;
}
@keyframes crossHeight {
@for $x from 1 through 100 {
#{$x * 1%} {
height: ($x) * 1%;
}
}
}
最佳答案
您正在设置高度动画，并且您还定义了 bottom:0，这是造成问题的原因。改为为底部设置动画，并使用带动画的前进来保持最后的状态:
.front {
transform-style: preserve-3d;
width: 108px;
height: 100px;
background: blue;
position: absolute;
left: 180px;
top: 30px;
margin: 4px 0 0 12px;
cursor: pointer;
}
.front:before {
content: "";
position: absolute;
top: 15px;
left: 18px;
right: 0;
z-index: 2;
background: url("https://appspowerplaymanager.vshcdn.net/images/biathlonmania/events/akropolis/lucky-pick/bg-lucky-pick-cancel-before.png") left top no-repeat;
animation: crossHeight 0.5s forwards;
animation-delay: 2s;
}
.front:after {
content: "";
position: absolute;
top: 15px;
left: 18px;
right: 0;
z-index: 2;
background: url("https://appspowerplaymanager.vshcdn.net/images/biathlonmania/events/akropolis/lucky-pick/bg-lucky-pick-cancel-after.png") left top no-repeat;
animation: crossHeight 0.5s forwards;
animation-delay: 1s;
}
@keyframes crossHeight {
from {
bottom:100%;
}
to {
bottom:0;
}
}<div class="front"></div>关于css - 如何动画CSS伪类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51397056/