skillup

技術ブログ

デザイン

transition関連

投稿日:

cssのanimationに関して。

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

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

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

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

Transition(変化)

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

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

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

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

css写経学習で感じたこと

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

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …