分からないこと
cssアニメーションでスクロールを促すスクロールダウンボタンを作成しております。
アニメーションを一回きりにし「終わっても動かしていた要素をその場で表示させたい」のですが
アニメーションが終わると、動かしていたものが消えてしまいます。
↓現在の動き(jsfiddle)
https://jsfiddle.net/1mnjqtod/2/
css
1.scroll { 2 font-size: 1em; 3 color: #000; 4 margin:0; 5 margin-left:10px; 6 padding-bottom: 130px; 7 transition: all 2.5s; 8} 9.scroll span { 10 display: inline-block; 11 transform: rotate(90deg); 12} 13.scroll::after { 14 content: ''; 15 position: absolute; 16 left: 15px; 17 width: 1px; 18 background: #000; 19 animation-name: scroll_line; 20 animation-duration: 2.5s; 21} 22@keyframes scroll_line { 23 from { 24 bottom: 170px; 25 height: 0; 26 } 27 30%, 70% { 28 bottom: 0; 29 height: 170px; 30 } 31 to{ 32 bottom: 0; 33 height: 170px; 34 } 35}
HTML
1<a href="#" class="scroll"><span>SCROLL</span></a>
@keyframes部分の問題でしょうか…?
それともjsか何かで指定するべきなのでしょうか。
お分かりになる方、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/18 06:31