```ここに言語を入力

``` ```ここに言語を入力 .arrow_top { position: absolute; top: 30%; left: 50%; width: 20px; height: 20px; margin-left: -12px; border-right: 5px solid #000; border-top: 5px solid #000; border-bottom: none; border-left: none; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: anime1 1.5s infinite; animation: anime1 1.5s infinite; animation-direction: reverse; animation-name: anime1; box-sizing: border-box; } @-webkit-keyframes anime1 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes anime1 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } /*下矢印*/ /*a { padding-top: 70px; }*/ .arrow_bottom { position: absolute; top: 60%; left: 50%; width: 20px; height: 20px; margin-left: -12px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: anime2 1.5s infinite; animation: anime2 1.5s infinite; animation-name: anime2; box-sizing: border-box; } @-webkit-keyframes anime2 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes anime2 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } ``` 矢印が動くアニメーションをつけたのですが、下方向に動く矢印は正しく動いていますが、上方向に動く矢印は下方向に動く矢印と同じように動いてくれていません。こちらのサイト（https://www.nxworld.net/tips/css-scroll-down-button.html）に書いてある通りに設置し、上向きには animation-direction: reverseをやれば良いのかなと思って、つけたんですが、微妙に点滅や動きが下向きと異なってしまいました。下向きの矢印と同じ動きにさせる為にはどのようにしたらよろしいでしょうか？ご享受下さい。

質問編集履歴