css - 如何使用 max-width 使用 css 动画将带有 p 标签的 div 向右滑动？

Question

我有一个信息框，但我希望它从左向右滑入。但是 css 动画以非常高的 div 开始，因为它里面有 p 标签。有没有办法来解决这个问题 ？

JsFiddle:https://jsfiddle.net/scj5vc3b/

HTML :

<div class="info-box info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>

SCSS:

.info-box {
   margin: 10px 0;
   border-left: 3px solid black;
   overflow: hidden;
   display: inline-block;
   -webkit-animation: slideIn 1s linear;
   position: relative;

   p {
    display: block;
    padding: 10px 20px 10px 10px;
    margin-bottom: 0;
   }
}

@keyframes slideIn {
  0%   {max-width: 0px;}
  100% {max-width: 1000px;}
}

.info-box.info {
 background-color: lighten(blue, 24);
}

Answer 1

改为对段落使用变换:

.info-box {
  margin: 10px 0;
  border-left: 3px solid black;
  -webkit-animation: slideIn 1s linear;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
p {
  padding: 10px 20px 10px 10px;
  margin-bottom: 0;
  transform: translateX(-100%);
  -webkit-animation: slideIn 1s linear forwards;
}
i {
  padding-right: 15px;
}
@keyframes slideIn {
  to {
    transform: translateX(0%);
  }
}
.info-box {
  background-color: lightblue;
}

<div class="info-box info">
  <p><i class="fa fa-info"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>