【CSS3】@keyframes と animation 関連のまとめ - Qiita
はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
