css - transition 的使用?

Question

想問問transition 該如何使用？

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

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

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

Answer 1

第一个transform使用矩阵表示。就是把translate、rotate等等之类的transform变换效果一起用一个矩阵表示了。
第二个transition-delay表示延迟，即每种过渡在触发后多久才开始，每一个与下面的属性一一对应。
第三个transition-duration表示每种属性的过渡时间，同样一一对应。
第四个transition-property就是要进行过渡动画的属性名，有transform和透明度(加了一个兼容的transform)
第五个transition-timing-function是过渡效果速度曲线，除了线性变化(匀速)，ease-XX(提供的分成三段，先快后慢之类的)，还可以使用贝塞尔曲线cubic-bezier(n,n,n,n)，贝塞尔曲线就可以做出你说的回弹效果(即超出最大或最小值再弹回去)

附上一个做贝塞尔曲线的地址

---

补充：
1.transition只需要写一个，写在常态里则移入移出都有transition过渡效果。写在:hover里则只有移入有过渡
//修改了你评论中的代码

.reat {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(15deg);
    background-color: red;
    /*貝塞爾曲線選取的不合適，無回彈,第四個參數要超出最大值 (即1.51)*/
    transition: transform 1s cubic-bezier(.17,.67,.48,1.51), opacity 1s ease;
}
            
.reat:hover {
    /*同名屬性要寫在一起，否則後面的會覆蓋前面的*/
    transform: scale(1.8) rotate(0);
    opacity: 1;
    box-shadow: 4px 14px 0 rgba(0, 0, 0, .125);
}

Answer 2

你可以参考一下这篇文章CSS中的transform与transition
上面有详细的信息

Answer 3

transition:all 1s;
过渡效果，1秒执行完全部动画。