<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}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.