我有一个信息框,但我希望它从左向右滑入。但是 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);
}
最佳答案
改为对段落使用变换:
.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>
关于css - 如何使用 max-width 使用 css 动画将带有 p 标签的 div 向右滑动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36292749/