自动启动动画CSS3

Question

我有一个带滑块的多页面：我插入了一个css3动画（着名的火箭动画）

我有代码：

＆＃13;

＆＃13;

#outerspace {
  position: relative;
  height: 400px;
  background: #fff;
  color: #fff;
}
div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
  -webkit-animation: bounceIn 2s;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -5400px);
  -moz-transform: translate(0px, -5400px);
  -o-transform: translate(0px, -5400px);
  -ms-transform: translate(0px, -5400px);
  transform: translate(0px, -5400px);
}

＆＃13;

<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>

＆＃13;

＆＃13;

＆＃13;

幻灯片更改时如何自动启动动画？

Answer 1

这里的Soo计划是通过将活动类添加到外太空div而不是悬停来触发动画，如下所示

#outerspace.active div.rocket {
  -webkit-transform: translate(0px, -5400px);
  -moz-transform: translate(0px, -5400px);
  -o-transform: translate(0px, -5400px);
  -ms-transform: translate(0px, -5400px);
  transform: translate(0px, -5400px);
}

并通过Jquery.Makesure中的addclass和removeclass触发它来设置超时，以便在删除类之前留出时间进行转换。

$("#outerspace").addClass("active");

setTimeout(function() { 
    $("#outerspace").removeClass("active"); 
}, 1000);

我不确定你想要对火箭做什么，但这个代码链接显示当幻灯片改变时触发火箭，我使用了简单的滑块，因为问题并没有提到你正在使用什么样的滑块，

http://codepen.io/saa93/full/BQNXJd

Answer 2

您应该查看CSS3 animations，它几​​乎适用于所有现代浏览器，而不使用javascript或jQuery。

这是一个JSfiddle，您需要添加到滑块中。

一个简单的例子就是：

/* Add a keyframe with a name, also add */
@keyframes rocket {
  from {
    transform: translate(0px, 0);
  }
  to {
    transform: translate(0px, -250px);
  }
}


div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
  /* Use the animation name with additional properties */
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

工作片段：

#outerspace {
  position: relative;
  height: 400px;
  background: #fff;
  color: #fff;
}
div.rocket {
  position: absolute;
  bottom: 10px;
  left: 20px;
  -webkit-transition: 3s ease-in;
  -moz-transition: 3s ease-in;
  -o-transition: 3s ease-in;
  transition: 3s ease-in;
  -webkit-animation-name: rocket;
  -webkit-animation-duration: 3s;
  animation-name: rocket;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
div.rocket div {
  width: 92px;
  height: 215px;
  background: url('https://i.stack.imgur.com/nxion.gif') no-repeat;
}
#outerspace:hover div.rocket {
  -webkit-transform: translate(0px, -250px);
  -moz-transform: translate(0px, -250px);
  -o-transform: translate(0px, -250px);
  -ms-transform: translate(0px, -250px);
  transform: translate(0px, -250px);
}
@-webkit-keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}
@keyframes rocket {
  from {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  to {
    -webkit-transform: translate(0px, -250px);
    -moz-transform: translate(0px, -250px);
    -o-transform: translate(0px, -250px);
    -ms-transform: translate(0px, -250px);
    transform: translate(0px, -250px);
  }
}

<div id="outerspace">
  <div class="rocket">
    <div></div>
    BoneOS
  </div>#outerspace
</div>