skillup

技術ブログ

デザイン

css animationの使い方、他スクロース量でのアニメーションなど

投稿日:2018年3月14日 更新日:

transitionとちょっと近いですがCSSでのanimationに関して。

HTML

CSS

幅が10pxから100pxに変化し、これが繰り返されます。

プロパティですが、
animation-name: sizeChange; 変化を具体的に定義(@keyframeで定義)
animation-duration: 1s; 変化にかかる時間
animation-timing-function: liner; 変化の方向
animation-delay: 5s; 画面が表示されてから変化にかかる時間
animation-iteration-count: infinite; 変化の回数。infiniteは無限

@keyframes  sizeChange{ 0% { width: 10px; } 100% { width: 100px; }}

0→100の方向に当然変化します。0,100だけでなく、その中間地点の変化を書くこともできます。

githubのソースは下記を参照。

https://github.com/umanari145/css/blob/master/animation.css
https://github.com/umanari145/css/blob/master/animation.html
【CSS3】@keyframes と animation 関連のまとめ

その他、スクロースしたときに変化するアニメーションなど。

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法

 

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-633eb1 …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

アーカイブ