CSS3のアニメーションテクニック

アニメーションの値の変え方を関数で決める

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティに定めるタイミング関数で、アニメーションする値の変え方が決まります。
講師:
05:53

字幕

このレッスンではアニメーションする値の 変化の仕方を変えてみます 今画面では i の文字が 点滅していますけれども 消えかかった蛍光灯のように 値が急に変わっていますね 値を変えるのは animation プロパティの タイミング関数という所で設定します Dreamweaver で開いた html ドキュメントには 既に animation が 設定されています けれどもその値の中に 関数は定められていません この場合のデフォルトの動きを 確認しておきましょう ファイルメニューから ブラウザーでプレビューです これがデフォルトのアニメーションです すーっと消えて すーっと出てくると いうことになっています ではここに関数をデフォルト以外で 設定してみたいと思います Dreamweaver に戻りましょう アニメーションする値の変化を定める タイミング関数は この時間の後に設定します 例えば linear というのは 直線的な機械的な動きになります ではこの動き確認してみましょう 保存してブラウザーでプレビューします これが直線的な機械的な動きということです ちょっと分かりにくいかもしれませんね 別のタイミング関数を試してみましょう では この linear は消しまして ease-in-out と これは加速減速が加わるパターンです やはり保存して確認します ブラウザーでプレビューです 頭に加速 終わりに減速が加わっています 先程の linear の画面も 残してありますので比べてみましょう よく見ないと分からないかもしれません こっちが直線的です すーっと消えてすーっと出てくる ちょっと時間間隔が違いますので 急に出てくるところもありますけれども それが ease-in-out だと このようになります 言われてみればという感じかもしれません これはちょっとグラフで 確認してみることにしましょう MDN の CSS ファイルにして animationの項のページを開きました その中の animation-timing -function というリンクから タイミング関数をたどることができます この timing-function のところで timing-function という カタカナ関数のリンクがあります これをクリックすると グラフによる説明が出てきます そして先程 linear とか ease-in-out というのは 一般的なタイミング関数の キーワードとして定められています 全部で7つあるんですけれども ここにあるのがその7つです そしてグラフが 小さいですけれども 設定されていますので 確認がしやすいと思います でも小さいので別に開いておきました まずこちらが linear ですね 直線的な機械的なというのは このグラフの動きです そしてデフォルトは 軽く加速して軽く減速する ease というキーワードになっています 次に ease-in というのは 立ち上がりで加速をします それからもう一つ試した ease-in-out 立ち上がりの加速と終わりの減速 ease と似ていますけれども ease はこちらです ease-in-out の方が 少しメリハリがきいていますね あとは ease-out 終わりで減速します 少し変わっているのは step というもので step-start というのは 始めの 値からいきなり終わりの値に飛びます そしてそのままずっといると もう一つ今回試したいのは step-end というパターンです こちらは 始めの状態のままずっと続いて 最後の瞬間に終わりの値に飛ぶということで 断続的な変化ができるわけです では Dreamweaver の方に 戻りましょう animation プロパティに定めた タイミング関数の ease-in-out を消して step-end とします ではもう確認しましょう 保存をしてブラウザーでプレビューします 断続的な 突然な変化ですね 急に変化しますので 点滅しているように見えます もうちょっとだけ変えて仕上げましょう また Dreamweaver です animationの @keyframes 規則に定めた終わりの状態です 不透明度 opacity が 0 になっていますが 完全に消すのではなくて 少し残しておきましょう 0.4 とします ではこれでまた保存をして確認します ブラウザーでプレビューです 完全に消えませんね うっすらと残っていますので より電球が消えかけた 蛍光灯でしょうか 蛍光灯が消えかけたような感じになりました このレッスンでは animation プロパティに 値の変化のさせ方として定められる タイミング関数をいくつか試し またリファレンスで どういう変化の仕方をするのか キーワード6つについて そのグラフを確認しました

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。