tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

cssのプロパティーtransitionが便利すぎた

物体を移動する際は今までjsでstyleの変更をループさせて作っていましたが今回初めてtransitionを使ってみた。

 

結果超便利だし、jsつかわない分軽い!笑

 

使い方

・移動したい要素に transition: all 1s 1s ease と書く

・jsかjqで移動したい位置にpositionを変更

 

これだけ笑

 

transition: all 1s 2s easeの四つの値については

all = 変化させるプロパティー(色などがあるが、allと書いても間違いない)

1s = 変化にかける時間

2s = 変化が始まる時間

ease = 変化の過程(easeの場合は終点に近くに連れてスピードが遅くなっていく、電車のように笑)

 

js苦戦してたこともあって次からこっち使おー!