CSSアニメーションは、JavaScriptと同様にHTML要素に動きをつけることが出来ます。
画面が読み込まれた後にすぐ動きますが、JavaScriptと組み合わせて「動くきっかけ」を指定することもできます。
例:スクロール(JavaScriptの役割)をすると、要素がふわっと(CSSの役割)表示される
CSSアニメーションの設置方法
1. エディタを開き、ファイルの拡張子を「.css」とし、CSSファイルとして保存。
2. 作成したCSSファイルを、cssフォルダの中に格納。
※ここでは仮に名前をoriginal-anime.cssとします。
3. CSSファイルの中に、動かしたいHTML要素のクラス名を指定し、アニメーションを設定。
※ここでは仮にクラス名を fadeInとします。
4. animation-nameにつけた名前に対し、keyframesで動きの変化を指定。
.fadeIn {
animation-name: fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeInAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
5. 自作のCSSをHTMLの<head>タグ内に読み込む。
<link rel="stylesheet" href="original-anime.css">
</head>
6. 動きのクラス名をHTML内の動かしたい要素に指定すると動く。
<p class="fadeIn">ふわっとテキストが現れる</p>
See the Pen CSSアニメーションの使い方 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!