php - 即使将动画填充模式设置为转发，文本动画也不会保持状态

Question

所以我制作了一个 slider ，其中文本从上到下移动，使用 css 动画进行整齐的动画移动，如您所见，问题是动画完成后文本会消失，他们告诉我有关使用 css属性动画填充模式设置为前进。我在这里做错了什么？

你可以在下面看到我的代码:

.from_left_to_bottom {
  position: absolute;
  left: 120px;
  opacity: 1;
  animation-name: from_left_to_bottom;
  animation-delay: 1500ms;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-iteration-count: 1;
  z-index:9999;
}

@keyframes from_left_to_bottom {
  0% {
    position: absolute;
    top: -200px;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 250px;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}


/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
.gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
.gran_slider_big_item_container{width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
/*GRAN SLIDER END*/

<div class="gran_slider_maincontainer" style="">
    <div class="gran_slider_big_container" style=" ">
        <div class="gran_slider_big_navegation_container" style=" ">
	        <a class="gran_slider_big_navegation_dot" href="" style=""></a>
		    <a class="gran_slider_big_navegation_dot" href="" style=""></a>
		    <a class="gran_slider_big_navegation_dot" href="" style=""></a>
	    </div>
	    <div class="gran_slider_big_item_container" style="">
	        <div class="gran_slider_big_item_gradient_overlay" style=""></div>
	        <div class="gran_slider_big_item_image move" style="background-image:url('https://www.samuirestaurantguide.com/wp-content/uploads/2016/07/prego-samui.jpg');"></div>
	        <div class="gran_slider_big_item_texts_container from_left_to_bottom" style=" ">
			    <span class="gran_slider_big_item_texts_title" style="">Churri I love you</span>
				<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
			</div>
	    </div>
    </div>
    <div class="gran_slider_small_container" style=""></div>
</div>

Answer 1

你可以这样调整动画:

.from_left_to_bottom {
  position: absolute;
  left: 120px;
  opacity: 1;
  animation-name: from_left_to_bottom;
  animation-delay: 1500ms;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-iteration-count: 1;
  z-index:9999;
}

@keyframes from_left_to_bottom {
  0% {
    /*position: absolute; useless */
    top: -200px;
    opacity: 0;
  }

  100% {
    /*position: absolute; useless */
    top: 250px; /*this need to be kept in the final state*/
    opacity: 1;
  }

}


/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
.gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
.gran_slider_big_item_container{width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
/*GRAN SLIDER END*/

<div class="gran_slider_maincontainer" style="">
    <div class="gran_slider_big_container" style=" ">
        <div class="gran_slider_big_navegation_container" style=" ">
	        <a class="gran_slider_big_navegation_dot" href="" style=""></a>
		    <a class="gran_slider_big_navegation_dot" href="" style=""></a>
		    <a class="gran_slider_big_navegation_dot" href="" style=""></a>
	    </div>
	    <div class="gran_slider_big_item_container" style="">
	        <div class="gran_slider_big_item_gradient_overlay" style=""></div>
	        <div class="gran_slider_big_item_image move" style="background-image:url('https://www.samuirestaurantguide.com/wp-content/uploads/2016/07/prego-samui.jpg');"></div>
	        <div class="gran_slider_big_item_texts_container from_left_to_bottom" style=" ">
			    <span class="gran_slider_big_item_texts_title" style="">Churri I love you</span>
				<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
			</div>
	    </div>
    </div>
    <div class="gran_slider_small_container" style=""></div>
</div>