一、transition（過渡、轉變的意思）
transition 屬性是一個簡寫屬性，用于設定四個過渡屬性：
1. transition-property：設定過渡效果的屬性名稱（默認值是all）；
2. transition-duration：設定過渡完成所需要的時間（默認值是0）；
3. transition-timing-function：設定過渡速度效果曲線（默認值是ease）；
4. transition-delay：設定過渡的開始時間（默認值是0）；
語法：transition: property duration timing-function delay;
注意：這里transition-duration是需要填的，不填默認為是0，沒有過渡效果，
二、animation（影片、活力的意思）
animation 屬性也是一個簡寫屬性，用于設定六個影片屬性：
1. animation-name：設定系結到選擇器的@keyframem名稱（默認值是none）；
2. animation-duration：設定完成影片所花費的時間（默認值是0）；
3. animation-timing-function：設定影片的速度曲線（默認值是ease）；
4. animation-delay：設定影片延遲幾秒開始（默認值是0）；
5. animation-iteration-count：設定影片播放的次數（默認值是1）；
6. animation-direction：設定時候輪流反向播放影片（默認值是normal）；
語法：animation: name duration timing-function delay iteration-count direction;
注意：這里animation-duration是需要填的，不填默認是0，就不會播放影片了，
三、區別
1. transition是一個過渡的效果，沒有中間狀態，需要設定觸發事件（如hover等）才能執行；
2. animation是一個影片的效果，有多個中間幀，可以在任意一個中間幀設定狀態，不需要設定觸發事件就能執行，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/452041.html
標籤：Html/Css