我正在try 为两个不同的类制作一些动画，而不是重复@KEYFRAMES属性.使得类的样式将不同，而关键帧动画属性保持不变. 即与两个不同元素相关联的类CLASS_1和CLASS_2.我try 在不分别重复CLASS_1和CLASS_2整个KEYFRAMES属性的情况下拥有@KEYFRAMES(CLASS_1 CLASS_2).
我试着在关键帧后用空格分隔两个类，并使用逗号，这两种情况都没有为两个元素生成动画，但当我在关键帧后放置一个类时就会产生动画.希望获得一种在不重复关键帧属性的情况下包括这两个类的方法.
/* properties of all the elements */
div {
width: 100px;
height: 100px;
background-color: red;
animation-duration: 4;
animation-iteration-count: infinite;
/*animation run time*/
}
/* the third and fourth element */
.anim_3,
.anim_4 {
position: relative;
}
/* for the third element */
.anim_3 {
animation-name: anim_3;
animation-delay: 1s;
}
/* for the fourth element */
.anim_4 {
animation-name: anim_4;
animation-delay: 2s;
animation-direction: reverse;
}
/* Animation code of the third and fourth element */
@keyframes anim_3,
anim_4 {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}<h1>CSS Animation</h1>
<p>
<b>Note</b> Both the background-color and the position of the element changes
</p>
<div class="anim_3">Third Animation</div>
<p>
<b>Note:</b> the animation runs in the reverse direction
</p>
<div class="anim_4">Fourth Animation</div>