CODEWITHSUNDEEP
cssanimationcss-animations
bastien
bastien

Reputation: 209

block disappeared at the end of the animation - CSS 3

I want to make a simple effet: slide a div from right to the center of a div (300x300).

I success to do that by using animation:

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

But I want a 2s delay before the animation stats. If I add animation-delay: 2s;, the text of the div is shown during 2s, after the animation starts and the text disappears, the text slides, but at the end, it disappears again.

How can I do not to have it at the before the animation, but that it stays visible after the animation ?

I tried with opacity, visibility in the animation, but nothing works.

Thanks for the answers

Upvotes: 1

Views: 767

Answers (1)

Roberto Regueiro Santiago
Roberto Regueiro Santiago

Reputation: 116

You don't have consistency here

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

and If you use:

transform: translateY(100px);

why you don't use transform: translateX in dropHeader too?

fix that and try again

If you want apply the property values for the time the animation ended use.

animation-fill-mode: forwards;

You can check this codepen if you want http://codepen.io/tarod_spj/pen/vKBVaK

I hope that hepl you.

Upvotes: 1

Related Questions