skillup

技術ブログ

デザイン

transition関連

投稿日:

cssのanimationに関して。

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

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

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

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

Transition(変化)

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-6 …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

アーカイブ