主页 / 问题 / 1075799
Accepted
Aslero
Asked:2020-01-29 19:48:15 +0800 CST2020-01-29 19:48:15 +0800 CST

反向动画

  • 772

有一个动画：

.remove {
  animation: Del .6s linear forwards;
}

@keyframes Del {
  99.9% {
    transform: rotate(90deg);
  }
  100% {
    display: none;
  }
}

添加这样的类时，块会上升并消失。以及如何做同样的事情，只是镜像？

css

1 个回答

  1. Best Answer

    它？

    .remove,
.remove,
.remove {
  display: inline-block;
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: green;
}

.remove1 {
  animation: remove1 .6s linear 1s forwards;
}

.remove2 {
  animation: remove2 .6s linear 3s forwards;
  opacity: 0;
}

.remove3 {
  animation: remove3 .6s linear 0s infinite alternate;
}

@keyframes remove1 {
  99.9% {
    transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes remove2 {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(-90deg);
    opacity: 1;
  }
}

@keyframes remove3 {
  99.9% {
    transform: rotate(90deg);
  }
  100% {
    display: none;
  }
}
    <div class="remove remove1"></div>
<div class="remove remove2"></div>
<div class="remove remove3"></div>

    • 4

相关问题