第6回webのひみつ(cssでのアニメーション)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はCSSのアニメーションについてまとめていきたいと思います。

まず、CSSは2011年6月にCSSアニメーションに対応しました。
このCSSアニメーションは、この月にfirefox5が対応したことがきっかけにグーグルや、Safari、iosなどなど次々に書くブラウザがCSSに対応していったそうです。
このCSSのメリット、デメリットについてに触れていきたいと思います。
(メリット)
<引用始め>
・ほとんどのスマホがCSSアニメーションに対応しているので、モバイル・デザインにも活用できる
・初心者にとってJavaScriptに比べると分かり易いコード
・動作がスムーズ
<引用終わり>
<引用URL>
https://blog.codecamp.jp/css_animation
(デメリット)
・jQueryなどの利用に比べると、コード量が増える
・アニメーション要素(プロパティ)が限定的

以上が上記のメリット、デメリットとなっています。
次に、CSSアニメーションの基本的な書き方を書いていきたいと思います。
よく見られる書き方の手順は、
.name{
animation: animationname 5s ease-out infinite;
}
@keyframes animationname
{
0% {}
100% {}
}
このような書き方がよく見られます。
この書き方は、
まず上の.nameはhtmlで指定した
div class=”1″
の部分で1で指定した部分がcssの.nameの部分となっています。

これを間違えるとまず動作しないので気を付けてください。
その次にanimation:の中にある、animationnameがこのキーフレーム名となっています。その次にしてされている5sはアニメーションの時間を指定しています。こちらは、指定した時間にかけてアニメーションを行っており、5sの場合だと5秒間をかけてアニメーションを再生するといった解釈となります。
次のease-outはイージングを示しており、動き方について示しています。例を挙げるとeaseInExpoといったものやlinearと呼ばれるものがあり、一つめに述べたものは段々と早くなるようなアニメーションを制作できるようになります。

次に@keyframesに関して説明をしていきたいと思います。
こちらは基本from,toを使用してアニメーションの移行方法を示しています。
しかし上記に示している方法は0%,100%と表記しています、これを応用することで75%を間に差し込んだりできます。
他にも色々なものがあるので、是非調べてみて下さい。
今回はこの辺で終わりたいと思います。
次回は、divなどのhtmlで指定したclassをcssで指定する方法を詳しく述べていませんでしたので、次回書いていきたいと思います。

(参考URL)

https://blog.codecamp.jp/css_animation

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー