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

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …

アーカイブ