CSSアニメーションの
使い方

CSSアニメーションは、JavaScriptと同様にHTML要素に動きをつけることが出来ます。

画面が読み込まれた後にすぐ動きますが、JavaScriptと組み合わせて「動くきっかけ」を指定することもできます。
例:スクロール(JavaScriptの役割)をすると、要素がふわっと(CSSの役割)表示される

CSSアニメーションの設置方法

CSSアニメーションの導入方法

1. エディタを開き、ファイルの拡張子を「.css」とし、CSSファイルとして保存。

2. 作成したCSSファイルを、cssフォルダの中に格納。
※ここでは仮に名前をoriginal-anime.cssとします。

3. CSSファイルの中に、動かしたいHTML要素のクラス名を指定し、アニメーションを設定。
※ここでは仮にクラス名を fadeInとします。

4. animation-nameにつけた名前に対し、keyframesで動きの変化を指定。

opacity:0;透過からopacity:1;(不透明の状態)になって出現

.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を押して動きを確かめてね!↑

CSSアニメーションで動きを指定しよう

基礎から学びたい方へ

Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう

Webサイトの動きを
実現する仕組みと準備

動かない時のチェック項目

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル
書籍紙面サンプル

出版社:ソシム株式会社 
2021/2/27 発売予定

トップページへ戻る

Page
Top