html
1<div class="container"> 2 <p class="arrow">矢印</p> 3</div>
css
1 .container { 2 width: 200px; 3 height: 200px; 4 border: 1px solid #000; 5 position: relative; 6 } 7 .arrow::after { 8 content: "→"; 9 font-size: 40px; 10 right: 0; 11 position: absolute; 12 top: 50%; 13 transform: translateY(-50%); 14 animation: rolling 1s infinite ease-in-out; 15 } 16 @keyframes rolling { 17 0% {transform: translateX(-5px);} 18 50% {transform: translateX(0px);} 19 100% {transform: translateX(-5px);} 20 }
このコードで、animation
プロパティを指定すると”→”が下に下がります。
なぜですか? また改善するにはどうすればいいでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 14:20
2018/10/25 12:43