登場と退場 · 出てくる・消える
ライトスピード光速穿梭
- とても速い
- 斜めに伸びる
- ぴたりと直立
要素が横から高速で飛び込み、その速度で体が斜めに引き伸ばされ、着地点で「ぴたり」と直立します。速度感はこの斜めがすべてです。外すとただのスライドインになります。斜めの量は速度に比例させ、速いほど強く傾けます。
使いどころ
「これは速く来た」と感じさせたいときに使います(大きな告知、期間限定、ライブ開始)。日常的なツール画面には使わないでください。騒がしく、二度目には効かなくなります。
パラメータ
transform: translateX -100%→0 · skewX -18deg→0deg · opacity 0→1 · 380ms ease-out
レシピ
ライトスピード → transform: translateX -100%→0 · skewX -18deg→0deg · opacity 0→1 · 380ms ease-out
AI に渡す一文
ライトスピードの登場を作ってください。要素を translateX(-100%) から 0 へ走らせながら、skewX を -18deg から 0deg に戻し、opacity を 0 から 1 へ、380ms の ease-out で。斜めは移動と同じ瞬間に終わらせてください。先に直立してから止まるのが見えてしまいます。容器には overflow: hidden を。