使用 CSS3 动画，animation-fill-mode 导致错误的元素大小

Question

当我尝试使用 CSS3 动画时，我得到了一个奇怪的结果。当我将 animation-fill-mode 添加到“父”

时，动画完成后“子”

的宽度不正确（小于 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/

谢谢。

【问题讨论】：

Answer 1

#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);
  }
}

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

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

Answer 2

结果是正确的。

子元素是被定位的父元素的 100% 宽度。由于您对父级应用了变换，因此父级已定位，并且它是用于计算此 100% 的宽度。

但是，否则，它不是并且孩子从身体获得宽度，

尝试将父位置更改为相对位置，例如，您将得到相同的结果（300px）