【新サービスリリースのお知らせ】直感的にアニメーションを生成できる！CSS transition ジェネレーター

サービスURLはこちら
https://front-end-tools.com/generateTransition/

英語版はこちら
https://front-end-tools.com/en/generateTransition/


CSSのtransitionジェネレーターをリリースいたしましたので、こちらの使い方の動画を配信しています。

今回のジェネレーターは以下のように様々な機能を盛り込みました。
・サンプルから選択し、そのあと自分なりにカスタマイズできる機能
・transition-property・transition-duration・transition-timing-function・transition-delayの各指定機能
・イージング（easing）のサンプルから選択する機能と、cubic-bezierの直感的な編集機能。
・transition前後のスタイル（style / CSS）の記載機能。CSSプロパティの記述時のオートコンプリート（autocomplete / 入力補助）機能。
・transiton前のtransformの直感的な編集機能
・要素を複数生成できる機能
・親要素を指定し、親要素に独自のスタイルを指定できる機能
・複数要素あった場合に、transition-duration・transition-timing-function・transition-delayを一括で指定できる機能。また、各要素のtransition-delayを少しずつずらすことができる機能
・transitionの再生・逆再生・一時停止機能と、指定した時間の要素の状態を確認できる機能。
・transition再生・逆再生時の再生速度変更機能
・hover時だけではなく、特定のクラスがついた時にtransitionさせるためのCSSの書き方の変更機能。
その為、若干複雑な部分もありますので是非こちらの動画で概要を把握していただき、
活用いただければと思います。