CODEWITHSUNDEEP
javascriptcsscss-animations
Yi Ren
Yi Ren

Reputation: 841

How to make an element with background image appear using css animation/javascript

I have a div tag with a background image. I want to use css animation or with combination of javascript/jquery to animate how the background image appears when the page loads. Currently, I have two vertical borders that I created with equal length and they both start off at the same position. When the page loads, one border will automatically move to the right side while the other one move to the left. During this transition, I want the div tag with the background image to slowly appear. Here's what I have so far: 

.background-img {
  width: 10px;
  margin: 0 auto;
}
.borders {
	position: absolute;
	left: 50%;
	width: 8px;
	background-color: blue;
	height: 50px;
	border-radius: 4px;
}

.left-vertical-border {
	animation-name:move-left;
	animation-duration: 2s;   
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;    

}

.right-vertical-border {
	top: 8px;
	animation-name:move-right;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards; 
}

@keyframes move-left {
	from{transform: translateX(0px);}
	to{transform: translateX(-100px);}
}

@keyframes move-right {
	from{transform: translateX(0px);}
	to{transform: translateX(100px);}
}
<!DOCTYPE html>
<html>
	<head>	
		<title>Creating Vertical borders using animation/javascript</title>			
	</head>
	<body>
		<div class="left-vertical-border borders"></div>
		<div class="background-img">fake bg image</div>
		<div class="right-vertical-border borders"></div>
	</body>
</html>

Thanks in advance!

Upvotes: 0

Views: 2518

Answers (1)

Krishnakant
Krishnakant

Reputation: 445

Add CSS:

.background-img {
  width: 10px;
  height: 10px;
  margin: 0 auto;
  animation-name:img-ani;
  animation-duration: 2s;   
  animation-timing-function: ease-in;
}             

@keyframes img-ani {
  from{opacity:0;}
  to{opacity: 1;}
}

Upvotes: 2

Related Questions