<div class="cp_arrows">
<div class="cp_arrow cp_bounce"></div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_arrows {
position: relative;
display: flex;
height: 300px;
margin: 2em auto;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {
position: absolute;
top: calc(50% - 25px);
left: 50%;
width: 40px;
height: 40px;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {
position: absolute;
display: block;
width: 3px;
height: 30px;
content: '';
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #f4511e;
}
.cp_arrows .cp_arrow::after {
-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
transform: translate(-50%, -50%) rotateZ(60deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.cp_arrows .cp_bounce {
-webkit-animation: arrow-move09 2s infinite ease-in-out;
animation: arrow-move09 2s infinite ease-in-out;
}
@-webkit-keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}