使用CSS3动画,动画填充模式会导致错误的元素大小

使用CSS3动画,动画填充模式会导致错误的元素大小,第1张

当我尝试使用CSS3动画时,我得到了一个奇怪的结果。当我将动画填充模式添加到" parent" < div>,动画结束后"孩子的宽度" < DIV>是不正确的(少于100%)。有人能告诉我为什么会这样吗?如果我删除这种风格,一切正常。

<div id="parent" class="fadeInLeft" >
     <div id="child">   </div>
</div>

#parent {               
            width: 300px;
            height: 300px;
            background-color:blue;
            border: 1px solid red;
            margin:50px;               
        }

#child
        {
            position:absolute;
            width:100%;
            height:100px;
            border:1px solid black;
            z-index:10;                
        }

  .fadeInLeft {
            -moz-animation-name: fadeInLeft;
            -o-animation-name: fadeInLeft;
            -webkit-animation-name: fadeInLeft;
            animation-name: fadeInLeft;

            -webkit-animation-duration: 1s;
             animation-duration: 1s;
             -webkit-animation-fill-mode: both;
             animation-fill-mode: both;
}


   @-webkit-keyframes fadeInLeft {
   0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


https://jsfiddle.net/7gy4b2op/

谢谢。

最佳答案:

2 个答案:

答案 0 :(得分:0)

&#13; &#13;
#parent {
    /*display: inline-block;*/
    width: 300px;
    height: 300px;
    background-color:blue;
    border: 1px solid red;
    margin:50px;
}

#child {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    position:absolute;
    width:100%;
    height:100px;
    border:1px solid black;
    z-index:10;
            
        }

.fadeInLeft {
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInLeft;

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
&#13;
<div id="parent" class="fadeInLeft" >
    <div id="child">   </div>
</div>  
&#13; &#13; &#13;

你的意思是孩子比父母要大一点吗?如果是这样,添加box-sizing:border-box;给你的孩子

答案 1 :(得分:0)

结果是正确的。

孩子的位置是父母的100%宽度。由于您将变换应用于父级,因此将定位父级,并且它是用于计算此100%的宽度。

但是,否则,它不是,孩子从身体获得宽度,

尝试将父位置更改为亲属,例如,您将获得相同的结果(300px)

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复