自动启动动画 CSS3

Question

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

我有代码：

#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);
}

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

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

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 中的 addclass 和 removeclass 触发它。确保设置超时以允许在删除类之前进行转换。

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

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

我不确定你到底想用火箭做什么，但是这个 codepen 链接显示当幻灯片改变时火箭被触发，我使用了简单的滑块，因为问题没有具体提到你使用的是哪种滑块，

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;
}

工作sn-p：

#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>