Question

您能告诉我如何为伪类设置动画吗：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%;
        } 
      }
    }

https://jsfiddle.net/jdk14vh5/2/

Answer 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伪类制作动画

1 个答案: