Javascript 暂停跨多个类的Webkit动画
我在暂停悬停上的多个动画时遇到问题 我已经包括了下面代码的相关部分（不是全部，因为它太长了）。该作品的主要两个动画在.orbit和.pos类中。当我应用动画播放状态属性时，它仅暂停.orbit类（orbit）中的动画，而不暂停.pos类（invert）中的动画 我怎样才能让一切暂停在悬停状态Javascript 暂停跨多个类的Webkit动画,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我在暂停悬停上的多个动画时遇到问题 我已经包括了下面代码的相关部分（不是全部，因为它太长了）。该作品的主要两个动画在.orbit和.pos类中。当我应用动画播放状态属性时，它仅暂停.orbit类（orbit）中的动画，而不暂停.pos类（invert）中的动画 我怎样才能让一切暂停在悬停状态 <DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title dir="ltr">WK 3D CSS Solar System</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
table {
-moz-border-collapse: collapse;
-webkit-border-collapse: collapse;
-o-border-collapse: collapse;
-ms-border-collapse: collapse;
border-collapse: collapse;
-moz-border-spacing: 0;
-webkit-border-spacing: 0;
-o-border-spacing: 0;
-ms-border-spacing: 0;
border-spacing: 0; }
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
body {
font-size: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
width: 1500px;
height: 600px;
background-color: transparent;
}
#universe {
z-index: 1;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#mercury:hover, #venus:hover, #jupiter:hover, #saturn:hover, #uranus:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
#galaxy {
position: relative;
width: 100%;
height: 100%;
/*perspective: 4000;*/ }
#solar-system {
position: absolute;
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 37%;
left: 48%;
border: 0px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-animation-name: orbit;
-webkit-animation-name: orbit;
-o-animation-name: orbit;
-ms-animation-name: orbit;
animation-name: orbit;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
.orbit .orbit {
-moz-animation-name: suborbit;
-webkit-animation-name: suborbit;
-o-animation-name: suborbit;
-ms-animation-name: suborbit;
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 6em;
height: 6em;
margin-top: -1em;
margin-left: -1em;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-animation-name: invert;
-webkit-animation-name: invert;
-o-animation-name: invert;
-ms-animation-name: invert;
animation-name: invert;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
#sun{
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 219px;
margin-top: -120px;
margin-left: -120px;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
.planet {
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
#earth .moon {
position: absolute;
top: 50%;
left: 50%;
width: 3em;
height: 3em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
#sun {
background-color: rgba(153, 211, 237, 0.4);
background-image:url('https://dl.dropboxusercontent.com/u/236154657/Popup_Circle_New3.png');
background-repeat: no-repeat;
background-position:center;
background-size: cover;
-moz-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-webkit-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-o-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
-ms-box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4);
box-shadow: 0px 0px 40px 60px rgba(153, 211, 237, 0.4); }
.planet {
background-color: #202020;
background-repeat: no-repeat;
background-size: cover;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear; }
/* --------------------------------------------------------------------------- animations */
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotateZ(0deg); }
100% {
-webkit-transform: rotateZ(-360deg); } }
@-moz-keyframes orbit {
0% {
-moz-transform: rotateZ(0deg); }
100% {
-moz-transform: rotateZ(-360deg); } }
@keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); } }
@-webkit-keyframes suborbit {
0% {
-webkit-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(90deg) rotateZ(-360deg); } }
@-moz-keyframes suborbit {
0% {
-moz-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(90deg) rotateZ(-360deg); } }
@keyframes suborbit {
0% {
transform: rotateX(90deg) rotateZ(0deg); }
100% {
transform: rotateX(90deg) rotateZ(-360deg); } }
@-webkit-keyframes invert {
0% {
-webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
@-moz-keyframes invert {
0% {
-moz-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
@keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
</style>
</head>
<body class="opening hide-UI view-3D zoom-large data-open controls-close">
<div id="universe" class="scale-stretched">
<div id="galaxy">
<div id="solar-system" class="Mercury">
<div id="venus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="earth" class="orbit">
<div class="pos">
<div class="orbit">
<div class="pos">
<div class="moon"></div>
</div>
</div>
<div class="planet">
<dl class="infos">
<dt>test</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mars" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>Mars</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="jupiter" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="saturn" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="uranus" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="neptune" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt>Neptune</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="mercury" class="orbit">
<div class="pos">
<div class="planet">
<dl class="infos">
<dt></dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
<div id="sun">
<dl class="infos">
<dt>Sun</dt>
<dd><span></span></dd>
</dl>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='http://secure.cart32.com/WarrenKahn/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="http://secure.cart32.com/WarrenKahn/prefixfree.min.js"></script>
<script src="http://secure.cart32.com/WarrenKahn/scripts.min.js"></script>
</body>
</html>
WK 3D CSS太阳系
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400300）；
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
保证金：0；
填充：0；}
文章、旁白、详细信息、图表、页脚、页眉、H组、菜单、导航、章节{
显示：block；}
身体{
线条高度：1；}
ol，ul{
列表样式：无；}
区块报价，q{
引号：无；}
blockquote:before，blockquote:after，q:before，q:after{
内容：无；}
桌子{
-moz边界塌陷：塌陷；
-webkit边界崩溃：崩溃；
-o-边界坍塌：坍塌；
-ms边界塌陷：塌陷；
边界塌陷：塌陷；
-moz边框间距：0；
-webkit边框间距：0；
-o-边界间距：0；
-ms边界间距：0；
边框间距：0；}
* {
-moz框大小：边框框；
-webkit框大小：边框框；
-o型盒尺寸：边框盒；
-ms框尺寸：边框框；
框大小：边框框；}
身体{
字体大小：10px；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
宽度：1500px；
高度：600px；
背景色：透明；
}
#宇宙{
z指数：1；
位置：绝对位置；
溢出：隐藏；
宽度：100%；
身高：100%；
背景位置：中心40%；
背景重复：无重复；
背景尺寸：封面；}
#水星：盘旋，#金星：盘旋，#木星：盘旋，#土星：盘旋，#天王星：盘旋{
-moz动画播放状态：暂停；
-webkit动画播放状态：暂停；
-o-动画播放状态：暂停；
-ms动画播放状态：暂停；
动画播放状态：暂停；
}
#银河系{
位置：相对位置；
宽度：100%；
身高：100%；
/*透视图：4000；*/}
#太阳系{
位置：绝对位置；
宽度：100%；
身高：100%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：preserve-3d；}
.轨道{
位置：绝对位置；
最高：37%；
左：48%；
边框：0px实心rgba（255、255、255、0.2）；
边界半径：50%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-moz动画名称：轨道；
-webkit动画名称：orbit；
-o-动画名称：轨道；
-ms动画名称：轨道；
动画名称：轨道；
-moz动画迭代次数：无限；
-webkit动画迭代计数：无限；
-o-动画-迭代-计数：无限；
-ms动画迭代次数：无限；
动画迭代次数：无限；
-moz动画计时功能：线性；
-webkit动画计时功能：线性；
-o-动画-计时-功能：线性；
-ms动画计时功能：线性；
动画计时功能：线性；}
.轨道，轨道{
-moz动画名称：子轨道；
-webkit动画名称：子轨道；
-o-动画名称：亚轨道；
-ms动画名称：亚轨道；
动画名称：子轨道；}
.pos{
位置：绝对位置；
最高：50%；
宽度：6em；
身高：6em；
边缘顶部：-1米；
左边距：-1米；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-moz动画名称：invert；
-webkit动画名称：反转；
-o-动画名称：反转；
-ms动画名称：反转；
动画名称：反转；
-moz动画迭代次数：无限；
-webkit动画迭代计数：无限；
-o-动画-迭代-计数：无限；
-ms动画迭代次数：无限；
动画迭代次数：无限；
-moz动画计时功能：线性；
-webkit动画计时功能：线性；
-o-动画-计时-功能：线性；
-ms动画计时功能：线性；
动画计时功能：线性；}
#太阳{
位置：绝对位置；
最高：50%；
左：50%；
宽度：220px；
高度：219px；
利润上限：-120px；
左边距：-120px；
边界半径：50%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：preserve-3d；}
.星球{
位置：绝对位置；
最高：50%；
左：50%；
宽度：3em；
高度：3em；
边缘顶部：-0.5em；
左边距：-0.5em；
边界半径：50%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：preserve-3d；}
#地球，月亮{
位置：绝对位置；
最高：50%；
左：50%；
宽度：3em；
高度：3em；
边缘顶部：-0.5em；
左边距：-0.5em；
边界半径：50%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-o变换样式：preserve-3d；
变换样式：preserve-3d；}
#太阳{
背景色：rgba（153,211,237,0.4）；
背景图像：url（'https://dl.dropboxusercontent.com/u/236154657/Popup_Circle_New3.png');
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
-moz盒阴影：0px 0px 40px 60px rgba（153211237,0.4）；
-网络工具包盒阴影：0px 0px 40px 60px rgb