CSS动画错误/问题？
[英]Css Animation Bug/issue?
问题描述
Description I have this animated div where the red background takes full width to the left then shrinks to half to reveal the image then Text reveals. 
说明我有一个动画div，其中红色背景在左侧占整个宽度，然后缩小到一半以显示图像，然后文本显示。 I have this small issue i seem to cant fix. 我有一个小问题，我似乎无法解决。 At the very end of the animation, the right column (red background ) shrinks again to adjust, i don't want this behavior, not sure where in the css/sass this is happening. 在动画的最后，右边的列（红色背景）再次缩小以进行调整，我不希望出现这种情况，不确定在css / sass中的哪个位置会发生这种情况。 Because of this i see the second image for a second before it adjust in mobile screens. 因此，在移动屏幕调整之前，我会看到第二张图像一秒钟。
.masthead-img-left { overflow: hidden; } .masthead-img-left .text-content-right:before { background-color: red; -webkit-animation-name: mastHeadanimateTextRight; -webkit-animation-duration: 1.5s; animation-name: mastHeadanimateTextRight; width: 100%; height: 100%; content: ""; position: absolute; left: 0; z-index: 1; transition-property: right, left; transition-property: right, left; margin: 0 auto; display: block; transition: all 5s linear; } @-webkit-keyframes mastHeadanimateTextRight { 0% { width: -1140px; -ms-transform: translateX(-1140px); /* IE 9 */ -webkit-transform: translateX(-1140px); /* Safari */ transform: translateX(-1140px); } 25% { width: -1140px; } 50% { width: 1140px; } 75% { width: -1140px; } 100% { width: -555px; -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } } .masthead-img-left .text-content-right-texts h1 span { color: black; } .masthead-img-left .text-content-right-texts h1, .masthead-img-left .text-content-right-texts p { color: white; z-index: 2; position: relative; -webkit-animation: mastHeadAnimateMovingText 3s; animation: mastHeadAnimateMovingText 3s; transition: all 3s linear; } .masthead-img-left .content-right-image { -webkit-animation-name: mastHeadanimateImageLeft; -webkit-animation-duration: 1s; animation-name: mastHeadanimateImageLeft; transition: all 1.5s linear; } @-webkit-keyframes mastHeadanimateImageLeft { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; } }
<html> <head> <title>Products slider</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> </head> <body> <div class="container masthead-img-left my-5"> <div class="row no-gutters d-flex justify-content-center"> <div class="col-lg-6"> <img src="https://www.dropbox.com/s/xy33pol9ctj24wt/" alt="iamge goes here" class="content-right-image img-fluid"> </div> <div class="col-lg-6 p-3 text-content-right d-flex justify-content-center align-items-center"> <div class="text-content-right-texts"> <h1>H1 title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur in quos possimus quaerat ex deserunt provident. Quae accusamus explicabo quia aperiam esse. Non ipsum, quidem quisquam alias atque velit voluptatem! </p> </div> </div> </div> </div> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2018-12-07 19:00:21
I think that the solution for this bug is very simple. 我认为该错误的解决方案非常简单。 Just change this: 只需更改此：
< div class="container masthead-img-left my-5" >
to this: 对此：
< div class="container masthead-img-left my-5" style="padding: 0px;"
I hope, that I helped. 我希望能有所帮助。
解决方案2
0 2018-12-07 19:42:35
Although I don't see padding, have you tried: 尽管我看不到填充，但是您是否尝试过：
p, div { box-sizing: border-box }
...? ...？
Otherwise I suspect the 否则我怀疑
margin: 0 auto
taking some available space. 占用一些可用空间。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.