Question

我的网站中有一个太空飞船对象，该对象在屏幕中从左到右移动（到查看端口）。

我需要显示另一个太空飞船对象，当上述太空飞船对象到达末端（屏幕视口）后，从右向左移动。

问题

我试图给第二个太空飞船对象“动画延迟”，但是它没有按照我的意愿工作。因为浏览器的宽度因屏幕而异。

这是我的代码。

.spaceship-1 img {
  width: 100px;
  animation: spaceship-1 10s ease-in-out 1;
  animation-fill-mode: forwards;
}

@-webkit-keyframes spaceship-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}

.spaceship-2 img {
  width: 100px;
  animation: spaceship-2 10s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 5s;
  position: absolute;
  right: 0;
  bottom: 15px;
}

@-webkit-keyframes spaceship-2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}

<div class="spaceship-1">
  <img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
  <img src="http://i68.tinypic.com/2lsxjpx.png" alt="">
</div>

Jsfiddle有什么想法吗？

Answer 1

如果要让第二个动画在第一个动画之后立即开始，则必须将def distance_calc (row): start = (row['start_lat'], row['start_lon']) stop = (row['stop_lat'], row['stop_lon']) return great_circle(start,stop).meters #lambda is not necessary orders['distance'] = orders.apply(distance_calc, axis=1)设置为等于第一个动画的animation-delay，巫婆为10s。而且，您也应该将两者都设为绝对。

animation-duration

body{
  background:#f6f6f6;
  overflow-x:hidden;
}

.spaceship-1 img{
  width:100px;
  animation: spaceship-1 10s ease-in-out 1 ;
  animation-fill-mode: forwards;
  position:absolute;
  left: 0;
  top: 10px;
}

 @-webkit-keyframes spaceship-1 {
 0% {
     transform: translateX(0);
   }
 100% {
      transform: translateX(calc(100vw - 100px)) ;
    }
 }
   
 .spaceship-2 img{
  width:100px;
  animation: spaceship-2 10s ease-in-out 1 ;
  animation-fill-mode: forwards;
  animation-delay:10s;
  position:absolute;
  transform: rotate(180deg);
  right: 0;
  bottom: 10px;
}

 @-webkit-keyframes spaceship-2 {
 0% {
     transform: translateX(0) rotate(180deg);
    }
  100% {
      transform: translateX(calc(-100vw + 100px)) rotate(180deg);
      }
   }

小提琴：https://jsfiddle.net/sph8f6ty/

检测CSS动画停止

1 个答案: