Question

当我尝试使用CSS3动画时，我得到了一个奇怪的结果。当我将动画填充模式添加到＆＃34; parent＆＃34; ＆lt; div＆gt;，动画结束后＆＃34;孩子的宽度＆＃34; ＆LT; DIV＆GT;是不正确的（少于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

＆＃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;

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

Answer 2

结果是正确的。

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

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

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

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

2 个答案: