Question

我想一次又一次地停止这个动画，也就是当动画完成后，宇宙飞船才能正确地进行。旋转飞行。

/* Table of contents
---------------
- Imports
- Mixins
- Extends
- Main Elements
*/
/*
IMPORTS
*/
@import url("http://fonts.googleapis.com/css?family=Montserrat");
/*
MIXINS
*/
/*
EXTENDS
*/
.center-hv, .ufo {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*
CONTAINER
*/
.loading {
  font-family: 'Montserrat', sans-serif;
  background-color: #2e5b8d;
  color: white;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  -ms-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
}

/*
MAIN ELEMENTS
*/
.ufo {
  position: absolute;
  background-image: url("http://www.picz.ge/img/s2/1503/25/d/d3ea7c2c9736.png");
  width: 130px;
  height: 256px;
  top: 55%;
}

.ufo.light {
  background-image: url("http://biacosta.com/img/loading/ufoLight.png");
  opacity: 0;
  -webkit-animation: 3s ease-in-out infinite normal running;
  -moz-animation: 3s ease-in-out infinite normal running;
  -o-animation: 3s ease-in-out infinite normal running;
  -ms-animation: 3s ease-in-out infinite normal running;
  animation: 3s ease-in-out infinite normal running;
  -webkit-animation-name: switch;
  -moz-animation-name: switch;
  -o-animation-name: switch;
  -ms-animation-name: switch;
  animation-name: switch;
}

@-webkit-keyframes switch {
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@-moz-keyframes switch {
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@keyframes switch {
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
.small-ghost {
  position: absolute;
  background-image: url("http://www.picz.ge/img/s2/1503/25/9/93b31db2958a.png");
  width: 61px;
  height: 53px;
  bottom: 15px;
  opacity: 1;
  -webkit-animation: 3s ease-in-out infinite normal;
  -moz-animation: 3s ease-in-out infinite normal;
  -o-animation: 3s ease-in-out infinite normal;
  -ms-animation: 3s ease-in-out infinite normal;
  animation: 3s ease-in-out infinite normal;
  -webkit-animation-name: float;
  -moz-animation-name: float;
  -o-animation-name: float;
  -ms-animation-name: float;
  animation-name: float;
  right: 32px;
}

@-webkit-keyframes float {
  0% {
    opacity: 1;
    bottom: 15px;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    bottom: 15px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  90% {
    bottom: 150px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0;
  }
}
@-moz-keyframes float {
  0% {
    opacity: 0;
    bottom: 15px;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    right: 45px;
    bottom: 15px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  90% {
    right: 45px;
    bottom: 150px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0;
  }
}
@keyframes float {
  0% {
    opacity: 0;
    right: -130px;
    bottom: 15px;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    right: 45px;
    bottom: 15px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  90% {
    right: 45px;
    bottom: 150px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity: 0;
  }
}

<div class="loading">
  <div class="ufo light"></div>
  <div class="ufo">
    <div class="small-ghost"></div>
  </div>

Answer 1

我想停止这个动画

如果您不希望动画无限，则将所有infinite（带有后缀）属性中的所有animation值替换为1。此值与animation-iteration-count相关，因此动画计数将为1而不是无限。

之后在.small-ghost留下一小部分结界。它必须将初始opacity设置为0才能在动画后隐藏。

https://jsfiddle.net/g1uh1Lsk/1/

当动画完成时，宇宙飞船也是正确的。旋转飞行。

最好自己尝试制作这部分，然后在出现问题时提出具体问题。

如何动画图像

1 个答案: