質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

815閲覧

css実装でスクロールを促すアニメーションについて

satoshickkk

総合スコア53

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/18 05:35

分からないこと

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か何かで指定するべきなのでしょうか。
お分かりになる方、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSS

1animation-fill-mode: forwards;

を追加するとアニメーションの最後の状態を保持するようになります。

animation-fill-mode | MDN

投稿2019/01/18 06:19

Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

satoshickkk

2019/01/18 06:31

最後の状態を保持できるanimation-fill-modeが存在しているのを初めて知りました。 勉強不足でした、教えていただきましてありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問