css - block 在动画结束时消失 - CSS 3

Question

我想做一个简单的效果:将一个 div 从右侧滑动到 div (300x300) 的中心。

我通过使用动画成功地做到了这一点:

/* Place your styles here */
*, input, button{
	font-family:"Roboto Slab";
}

.ad{
	width:300px;
	height:250px;
	overflow:hidden; /* elements won’t spill outside of the ad */
	position:relative; /* make it easier to position elements */
	background-color:#efefef;
	color:#3A3A3A;
  text-align: center
}

.h1-background{
	color:white;
	background-color:#003967; /* #4285F4;*/
	padding-top:20px;
	padding-bottom:20px;
	padding-left:10px;
	padding-right:10px;
	text-align:center;
  height: 100px;
}

h1#text-1{
	position:relative;
  font-size: 26px;
}

h1#text-2 {	
  font-size: 20px;
  position: relative;
  left: 0px;  

  -moz-animation-name: dropHeader;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 0.5s;      

  -webkit-animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 0.5s;
  -webkit-transition-delay: 5s;

  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;  
}

@-moz-keyframes dropHeader {
    from {left: 0px;}
    to {left: 200px;}
}
@-webkit-keyframes dropHeader {
   from {left: 300px;}
    to {left: 0;}
}
@keyframes dropHeader {
    from {left: 300px;}
    to {
      left: 0px;      
    }   

}

.company-logo
{
  width:80%;
  height: auto
}
button{
	padding:5px 20px; /* give the button some padding */
	font-size:20px; /* expand the font size */
	background-color:  #95c11a; /*#4285F4;*/
	border:none;	/* Remove the default border */
	color:white;	
	margin:auto;	/* Centers the button */
	margin-top:7px;
	display:block;
	position:relative;	/* Position relatively for animation */
	cursor:pointer;
	border-radius:50px; /* Give the button a rounded look */
	cursor:pointer;

	-moz-animation-name: raiseButton;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: linear;
  -moz-animation-duration: .7s;


  -webkit-animation-name: raiseButton;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: .7s;


  animation-name: raiseButton;
  animation-iteration-count: 1;
  animation-timing-function: linear;	
  animation-duration: .7s;
 
}
@-moz-keyframes raiseButton {
    0% {
      -moz-transform: translateY(100px);
      opacity :0;
    }
    50%{
    	-moz-transform: translateY(100px);
    	opacity :0;
    }
    100% {
      -moz-transform: translateY(0);
      opacity:1;
    }
}
@-webkit-keyframes raiseButton {
    0% {
        -webkit-transform: translateY(100px);
        opacity :0;
    }
    50%{
    	-webkit-transform: translateY(100px);
    	opacity :0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity:1;
    }
}
@keyframes raiseButton {
    0% {
        transform: translateY(100px);
        opacity :0;
    }
    50%{
    	transform: translateY(100px);
    	opacity :0;
    }
    100% {
        transform: translateY(0);
        opacity :1;
    }
}

<!-- your ad goes inside here -->
			<div class="ad">
				<img class="company-logo" src="company-logo.png" />
				<div class="h1-background">					
					<h1 id="text-2">test test</h1>
				</div>
				<button id="cta">
				azerty
				</button>
			</div>

但我想在动画统计数据之前延迟 2 秒。如果我加上animation-delay: 2s;，div的文字显示时间为2s，动画开始后文字消失，文字滑动，最后又消失。

我怎么能不让它出现在动画之前，而是让它在动画之后保持可见？

我尝试了动画中的不透明度和可见性，但没有任何效果。

感谢您的回答

Answer 1

这里你没有一致性

@-moz-keyframes dropHeader {
  from {left: 0px;}
  to {left: 200px;}
}
@-webkit-keyframes dropHeader {
  from {left: 300px;}
  to {left: 0;}
}

如果您使用:

transform: translateY(100px);

你为什么不用 transform: translateX 也在 dropHeader 中？

修复它并重试

如果您想应用动画结束时的属性值，请使用。

animation-fill-mode: forwards;

如果你愿意，你可以检查这个codepen http://codepen.io/tarod_spj/pen/vKBVaK

希望对您有所帮助。