我正在制作这个圆形向下滚动按钮，里面有一个箭头.在hover上，我想应用一个动画，使箭头从圆形div的上方移动到下方，当它位于div之外时，应该将其隐藏.
代码:https://codepen.io/RaphaelleD/pen/vYpqxpm
@keyframes tipUp {
0% {
transform: translateY(-10px) rotateZ(225deg);
}
100% {
transform: translateY(100px) rotateZ(225deg);
}
}
@keyframes lineUp {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(100px);
}
}
.scrolldown {
position: relative;
margin: 0 auto;
}
.scrolldown p {
font-size: 1rem;
font-weight: 600;
padding-bottom: 0.8rem;
text-align: center;
}
.scrolldown__arrow {
width: 6rem;
height: 6rem;
border: 6px solid black;
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
}
.scrolldown__arrow:before {
position: absolute;
display: inline-block;
content: "";
background: black;
width: 10px;
height: 45px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -5px;
transform: translateY(50px);
}
.scrolldown__arrow:after {
position: absolute;
display: inline-block;
content: "";
width: 22px;
height: 22px;
color: black;
border-top: 9px solid;
border-left: 9px solid;
transform: rotateZ(45deg);
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -15.5px;
transform: translateY(50px) rotateZ(225deg);
}
.scrolldown__arrow:hover:before {
animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.scrolldown__arrow:hover:after {
animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
}
}<body>
<div class="scrolldown">
<p>SCROLL DOWN</p>
<div class="scrolldown__arrow"></div>
</div>
</body>