html - 阻止那个 div 移动动画 css3

Question

好的..所以我对 css3 中的动画有疑问:我制作了 4 个 div，其中一个动画将它们向左和向下移动，另一个 div 被这 4 个向下移动...我希望那个 div 保留固定在那里。这是 css3 代码的一部分:

@-webkit-keyframes anim{
    0% {background-color:#333399; margin-top:16px; margin-left: 20px;}
    25% {background-color:#336699; margin-top:16px; margin-left:190px;}
    50% {background-color:#339999; margin-top:91px; margin-left:190px;}
    75% {background-color:33CC99; margin-top:91px; margin-left:20px;}
    100% {background-color:#333399; margin-top:16px; margin-left:20px;}
    }
    .anim{
    height:70px;
    width:110px;
    text-align:center;
    padding: 35px 0 0 0;
    font-family:"Comic Sans MS", cursive, sans-serif;
    color:#F0F0F0;
    -webkit-animation-name: anim;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    }
    #content{
    background-color:#CCFFFF;
    height:800px;
    width:550px;
    margin-left:400px;
    margin-top:-400px;
    position:absolute;
    }

<div class="anim">bla</div>
<div class="anim">blabla</div>
<div class="anim">blablabla</div>
<div class="anim">blablablabla</div>
<div id="content"><div>

这是html代码的一部分

Answer 1

您仅使用边距定义 div#content 的位置。它将遵循其先例兄弟的位置。使用 top 属性允许独立于您的动画设置其位置。

@-webkit-keyframes anim{
    0% {background-color:#333399; margin-top:16px; margin-left: 20px;}
    25% {background-color:#336699; margin-top:16px; margin-left:190px;}
    50% {background-color:#339999; margin-top:91px; margin-left:190px;}
    75% {background-color:33CC99; margin-top:91px; margin-left:20px;}
    100% {background-color:#333399; margin-top:16px; margin-left:20px;}
    }
    .anim{
    height:70px;
    width:110px;
    text-align:center;
    padding: 35px 0 0 0;
    font-family:"Comic Sans MS", cursive, sans-serif;
    color:#F0F0F0;
    -webkit-animation-name: anim;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    }
    #content{
    background-color:#CCFFFF;
    height:800px;
    width:550px;
    margin-left:400px;
    top:16px;
    position:absolute;
    }

<div class="anim">bla</div>
<div class="anim">blabla</div>
<div class="anim">blablabla</div>
<div class="anim">blablablabla</div>
<div id="content"><div>