私はこのページの上部に一連の質問があるFAQページを持っています。これらの質問は、回答があるページのセクションへのリンクです(例:https://www.unicefusa.org/about/faq)。html/cssだけでhtml要素を数秒間強調表示するにはどうすればよいですか?
上記のリンク先に行くと、ページの上部にリストされている質問をクリックすると、そのページが回答を提供するセクションにジャンプします。私はリンクがジャンプする(クリックされる)ページのセクションを一時的にハイライト表示することがどのように可能であろうと思っています。 html/cssでこれを行うことは可能ですか?
はい可能です。あなたがジャンプした要素は、疑似クラス ':target'によって実際に選択可能です。必要なのはCSSアニメーションを追加することだけです(' animation-iteration-count'を1に設定してください)。 – Terry
https://codepen.io/mcoker/pen/yXpjEx –
@Terryありがとうございました、それはトリックでした。アニメーションスタイルを追加する:ターゲット作品。唯一の問題は、同じリンクが2回クリックされたときに機能しないことです。たとえば、リンクを1回クリックすると、ページが関連するセクションに移動し、アニメーションが機能します。リンクにスクロールしてもう一度クリックすると、関連セクションに戻りますがアニメーションは表示されません。同じリンクを2回連続してクリックしないと、アニメーションは常に機能します。それを修正する方法がわからない... – hvasam