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

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …