cssのanimationに関して。
例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。
|
1 2 3 4 5 6 7 8 9 10 |
.button_css{ width: 200px; padding: 10px 0; text-align: center; transition:all 1s liner .2s } .block_css:hover{ backgrond:#eee; } |
言葉だとうまく言い表せませんが、ふわっとしたような動きになります。
transitionの書き方はそれぞれ下記のようになります。
- 対象のプロパティ：何もなければall
- 変化にかける時間
- 変化の仕方：最後でスピードアップするか、最初でスピードアップするか、一直線か
- トリガーが起こってから変化が始まるまでの時間
１つのセレクタで異なったtransitionを複数定義したい時はカンマで区切ります。
|
1 2 3 4 5 6 7 8 9 |
p { width:50px; background-color:red; transition:background-color 1s linear 0s , width 2s linear 0s; } p:hover { width:300px; background-color:blue; } |
https://github.com/umanari145/css/blob/master/animation.html
