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

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

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

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

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

checkboxのカスタマイズ

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