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>

从动画动画css3中停止div

1 个答案: