skillup

技術ブログ

デザイン

transition関連

投稿日:

cssのanimationに関して。

例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。

言葉だとうまく言い表せませんが、ふわっとしたような動きになります。
transitionの書き方はそれぞれ下記のようになります。

  • 対象のプロパティ:何もなければall
  • 変化にかける時間
  • 変化の仕方:最後でスピードアップするか、最初でスピードアップするか、一直線か
  • トリガーが起こってから変化が始まるまでの時間

1つのセレクタで異なったtransitionを複数定義したい時はカンマで区切ります。

Transition(変化)

https://github.com/umanari145/css/blob/master/animation.html

-デザイン
-

執筆者:


comment

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

関連記事

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

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

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

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …