使用多个CSS类一起<div></div>

Question

我想同时使用多个CSS类

每个类都在HTML介绍如下：

通过连续这样做，每个班， 我不想。 我想连在一起。

每个班级都是动画;这样做，每个在一段&

占据很大的空间。

CSS代码：

.OT_below0 
{ 
border-radius:0px 0px 0px 0px; 
border:solid transparent; 
border:solid rgba(255,255,255,0); 
border-width:0px 0px 0px 0px; 
margin-top:0px; 
margin-left:0px; 
margin-right:0px; 
margin-bottom:0px; 
background:url("http://localhost/OTA/templates/OT/images/Index1.jpg") no-repeat fixed center center/cover; 
background-attachment:fixed; 
padding-top:0px; 
padding-left:0px; 
padding-right:0px; 
padding-bottom:0px; 
height:700px; 
} 
.spk1{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark1.png"); 
animation:spk1 30s infinite; 
} 
/* Standard syntax */ 
@keyframes spk1 { 
0% {left:-1100px;top:10px;} 
33% {left:-10px;top:600px;} 
66% {left:-1100px;top:10px;} 
100% {left:-10px;top: 600px;} 
} 
.spk2 
{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark2.png"); 
animation: spk2 50s infinite; 
-webkit-animation: spk2 50s infinite; /* Chrome, Safari, Opera */ 
} 
/* Standard syntax */ 
@keyframes spk2 { 
0% {left:-1100px;top:10px;} 
33% {left:-10px;top:600px;} 
66% {left:-1100px;top:10px;} 
100% {left:-10px;top: 600px;} 
} 
.spk3 
{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark3.png"); 
animation: spk3 60s infinite; 
-webkit-animation: spk3 60s infinite; /* Chrome, Safari, Opera */ 
} 
/* Standard syntax */ 
@keyframes spk3 { 
0% {left:0px;top:0px;} 
33% {left:-1100px;top:500px;} 
66% {left:-1100px;top:10px;} 
100% {left:10px;top: -600px;} 
} 
.spk4 
{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark4.png"); 
animation: spk4 120s infinite; 
-webkit-animation: spk4 120s infinite; /* Chrome, Safari, Opera */ 
} 
/* Standard syntax */ 
@keyframes spk4 { 
0% {left:0px;top:230px;} 
33% {left:-1300px;top:290px;} 
66% {left:100px;top:210px;} 
100% {left:1250px;top: 250px;} 
} 
.spk5 
{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark5.png"); 
animation: spk5 200s infinite; 
-webkit-animation: spk5 200s infinite; /* Chrome, Safari, Opera */ 
} 
/* Standard syntax */ 
@keyframes spk5 { 
0% {left:-1300px;top:260px;} 
50% {left:50px;top:400px;} 
100% {left:-1300px;top: 600px;} 
} 
.spk6 
{ 
width: 99px; 
height: 99px; 
position: relative; 
background-image:url("http://localhost/OTA/templates/OT/images/spark6.png"); 
animation: spk6 150s infinite; 
-webkit-animation: spk6 150s infinite; /* Chrome, Safari, Opera */ 
} 
/* Standard syntax */ 
@keyframes spk6 { 
0% {left:0px;top:650px;} 
33% {left:-1300px;top:10px;} 
66% {left:150px;top:30px;} 
100% {left:-1350px;top: 650px;} 
} 

HTML代码：

<div class="OT_below0"> </div> 
<div class="custom"> </div> 
<div class="spk1"> </div> 
<div class="spk2"> </div> 
<div class="spk3"> </div> 
<div class="spk4"> </div> 
<div class="spk5"> </div> 
<div class="spk6"> </div> 
<p style="text-align: center;"><a title="network" href="xx"><img src="images/social/xx.png" alt="netw" width="90" height="90" /></p> 

任何帮助，将不胜感激。

Answer 1

第一：你必须让一般属性CSS到一个关键帧，例如：

@keyframes spkGeneral { 
0% {left:-1100px;top:10px;} 
33% {left:-10px;top:600px;} 
66% {left:-1100px;top:10px;} 
100% {left:-10px;top: 600px;} 
} 

您可以通过设置多关键帧动画：

-webkit-animation-name: spkGeneral, spk1;