インターン皆さんこんにちは。インターン生の明瀨と申します。今回はCSSのアニメーションについてまとめていきたいと思います。CSSは2011年6月にCSSアニメーションに対応しました。このCSSアニメーションは、この月にfirefox5が対応したことがきっかけにグーグルや、Safari、iosなどなど次々に書くブラウザがCSSに対応していったそうです。このCSSのメリット、デメリットについてに触れていきたいと思います。以上が上記のメリット、デメリットとなっています。次に、CSSアニメーションの基本的な書き方を書いていきたいと思います。{}}このような書き方がよく見られます。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興味を持たれた方はお気軽にお問い合わせください。インターンシップへの申し込み・お問い合わせ先メールでのお問い合わせは、下記フォームに入力して送信してください。