<div class="arrow animated"></div>
body {
  background: black;
}
 
.arrow {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left:-20px;
}
.arrow:before,
.arrow:after{
  content: '';
  position: absolute;
  top: 0;
  right: -24px;
  width: 30px;
  height: 7px;
  border-radius: 10px;
  display: block;
  background: #fff;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg); 
}
.arrow:after{
  right: inherit;
  left: -24px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg); 
}
 
.animated{
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s both infinite;
}
 
 
@-webkit-keyframes bounce {
	0% {-webkit-transform: translateY(0); opacity: 0;}
  60% { opacity: 1;}
  100% {-webkit-transform: translateY(-60px); opacity: 0}
}
 
@-moz-keyframes bounce {
	0% {-webkit-transform: translateY(0); opacity: 0;}
  60% { opacity: 1;}
  100% {-webkit-transform: translateY(-60px); opacity: 0}
}
 
@-o-keyframes bounce {
	0% {-webkit-transform: translateY(0); opacity: 0;}
  60% { opacity: 1;}
  100% {-webkit-transform: translateY(-60px); opacity: 0}
}
@keyframes bounce {
	0% {-webkit-transform: translateY(0); opacity: 0;}
  60% { opacity: 1;}
  100% {-webkit-transform: translateY(-60px); opacity: 0}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.