css+伪类+加载动画,如何为CSS伪类制作动画

您能告诉我如何为伪类设置动画吗：after和：before，所以第一个出现是：after和then：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%;

}

}

}