Question

我想做一个简单的操作：将div从右边滑到div的中心（300x300）。

我通过使用动画成功实现了这一点：

renderOverlay

/* 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;
    }
}

但我想在动画统计数据之前延迟2秒。如果我添加动画延迟：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);

为什么你不使用变换：dropHeader中的translateX也是？

解决此问题并重试

如果要在动画结束时使用属性值。

animation-fill-mode: forwards;

如果需要，您可以检查此codepen http://codepen.io/tarod_spj/pen/vKBVaK

我希望你好。

块在动画结束时消失了 - CSS 3

1 个答案: