Javascript 自动启动动画CSS3

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

我有密码：

#外层空间{
位置：相对位置；
高度：400px；
背景：#fff；
颜色：#fff；
}
火箭师{
位置：绝对位置；
底部：10px；
左：20px；
-webkit过渡：3s易用性；
-moz转换：3s易用；
-o-过渡：3s容易；
过渡期：3s放松；
}
火箭师{
宽度：92px；
身高：215px；
背景：url（'https://i.stack.imgur.com/nxion.gif")不重复;；
-webkit转换：2个易入易出；
-moz转换：2s易入易出；
-o型转换：2秒易进易出；
转换：2s易进易出；
-webkit动画：bouncein2s；
}
#外层空间：悬停舱火箭{
-webkit转换：转换（0px，-5400px）；
-moz变换：平移（0px，-5400px）；
-o变换：平移（0px，-5400px）；
-ms变换：平移（0px，-5400px）；
转换：转换（0px，-5400px）；
}

骨灰
#外层空间

您应该研究CSS3

动画

，它几乎可以在所有现代浏览器中使用，而不需要使用

javascript

或

jQuery

这里是一个开始，你需要添加到你的滑块

一个简单的例子如下：

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

工作代码段：

#外层空间{
位置：相对位置；
高度：400px；
背景：#fff；
颜色：#fff；
}
火箭师{
位置：绝对位置；
底部：10px；
左：20px；
-webkit过渡：3s易用性；
-moz转换：3s易用；
-o-过渡：3s容易；
过渡期：3s放松；
-webkit动画名称：火箭；
-webkit动画持续时间：3s；
动画名称：火箭；
动画持续时间：3s；
动画迭代次数：无限；
动画方向：交替；
}
火箭师{
宽度：92px；
身高：215px；
背景：url（'https://i.stack.imgur.com/nxion.gif")不重复;；
}
#外层空间：悬停舱火箭{
-webkit转换：转换（0px，-250px）；
-moz变换：平移（0px，-250px）；
-o变换：平移（0px，-250px）；
-ms变换：平移（0px，-250px）；
转换：转换（0px，-250px）；
}
@-webkit关键帧火箭{
从{
-webkit转换：转换（0px，0）；
-moz变换：平移（0px，0）；
-o变换：平移（0px，0）；
-ms变换：平移（0px，0）；
转换：转换（0px，0）；
}
到{
-webkit转换：转换（0px，-250px）；
-moz变换：平移（0px，-250px）；
-o变换：平移（0px，-250px）；
-ms变换：平移（0px，-250px）；
转换：转换（0px，-250px）；
}
}
@火箭关键帧{
从{
-webkit转换：转换（0px，0）；
-moz变换：平移（0px，0）；
-o变换：平移（0px，0）；
-ms变换：平移（0px，0）；
转换：转换（0px，0）；
}
到{
-webkit转换：转换（0px，-250px）；
-moz变换：平移（0px，-250px）；
-o变换：平移（0px，-250px）；
-ms变换：平移（0px，-250px）；
转换：转换（0px，-250px）；
}
}

骨灰
#外层空间

这里的计划是通过将活动类添加到outerspace div而不是hover来触发动画，如下所示

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

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

---

我将图像插入到您的问题中，跨域访问出现问题您好，谢谢您的回答。我是指那些幻灯片：哈哈，没什么问题，我会说：“谢谢你的建议”