<!--矢印の為のコード二つ--> <div id="arrow"> <a href="#" class="arrow_top" ><span></span></a> <a href="#" class="arrow_bottom"><span></span></a> </div> <!-- ココまで-->
.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をやれば良いのかなと思って、つけたんですが、微妙に点滅や動きが下向きと異なってしまいました。下向きの矢印と同じ動きにさせる為にはどのようにしたらよろしいでしょうか?ご享受下さい。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/15 06:37