css - transition 的使用?

Question

想問問transition 該如何使用？

我是去 https://santatracker.google.c...

發現這個效果
移過去會先放大，然後最後再縮小一點有點彈簧的感覺
這種效果該怎麼做？

我看到他transition 語法似乎是可以累加的？
請問有大神能解釋原理嗎？

高洛峰 · Answer

最初の変換は行列で表されます。平行移動や回転などの変形効果をマトリクスでまとめて表現するものです。
2 番目の遷移遅延は遅延、つまり各遷移がトリガーされてから開始するまでの時間を表します。それぞれは次の属性に 1 対 1 で対応します。
3 番目のtransition-duration は、各属性の遷移時間を表し、これも 1 対 1 に対応します。
4 番目のtransition-property は、トランスフォームと透明度を含むトランジションアニメーションのプロパティ名です (互換性のあるトランスフォームが追加されます)。
5 番目のtransition-timing-function は、線形変化に加えて、トランジションエフェクトのスピードカーブです。 (一定速度)、ease-XX (提供されているものは 3 つのセクションに分かれており、最初に高速、次に低速)、ベジェ曲線 cubic-bezier(n,n,n,n) も使用できます。 , ベジェ曲線は、あなたが言及したリバウンド効果 (つまり、最大値または最小値を超えてからリバウンド) を生み出す可能性があります。

ベジェ曲線を作成するためのアドレスを添付します

補足:
1. トランジションは 1 つだけ書く必要があり、通常の状態で記述すると、移動時にトランジション効果が得られます。 :hover で記述した場合、移動時のみ遷移します
//コメント内のコードを修正

.reat {
    幅: 200ピクセル;
    高さ: 200ピクセル;
    境界半径: 50%;
    不透明度: 0;
    変換: 回転(15 度);
    背景色: 赤;
    /*ベジェ曲線の選択が不適切で、リバウンドがなく、4 番目のパラメータが最大値 (つまり 1.51) を超えています*/
    トランジション: 変換 1 秒の立方ベジェ (.17,.67,.48,1.51)、不透明度 1 秒のイーズ。
}
            
.reat:ホバー {
    /*同じ名前の属性は一緒に記述する必要があります。そうしないと、後の属性が前の属性を上書きします*/
    変換: スケール(1.8) 回転(0);
    不透明度: 1;
    ボックスシャドウ: 4px 14px 0 rgba(0, 0, 0, .125);
}