0
我有一些移動字css3動畫。 動畫很好（片段）。如果有人使用懸停，動畫停止（很好），但不接受不透明度和z-index（.bubble：hover）的更改。CSS 3動畫與關鍵幀懸停改變不透明度和Z指數不起作用
opacity: 1;
z-index: 100;
.bubble：hover類正在使用轉換操作工作。
transform: scale(1.2);
目標是在前景中彈出懸停的氣泡。 如果泡泡離開，動畫應該從停止點開始移動。 我該如何解決它？
感謝您的幫助。
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1;
z-index: 100;
}
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
}
@keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
@keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes color {
0% {
opacity: 0.5;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
<a href="Test1.html" title="Test1" class="orbitLink"> Test1</a>
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
<a href="Test2.html" title="Test2" class="orbitLink">Test2</a>
</div>
</div>
</a>
</div>
'important'不起作用？ – xXDarioXx
！重要的不工作 –