https://i.sstatic.net/OINsU.png
Issue with Animated Div I am working on an animated div where the red background expands to the left, then shrinks to reveal an image and text. However, I am facing a problem where at the end of the animation, the right column (red background) shrinks again unexpectedly. I can't seem to figure out where this behavior is coming from in the CSS/SASS code. Due to this issue, there is a momentary display of the second image before it adjusts properly on 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="image 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>Heading Title Here</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>