CSS3中的transition屬性可以為元素添加動態(tài)效果,其中最重要的一個參數(shù)就是延時(delay)。通過給元素添加延時可以讓動畫在一段時間后才開始執(zhí)行,從而更加靈活地控制整個動畫的節(jié)奏。
.example { transition: opacity 1s ease-in-out 0.5s; /* opacity屬性從0到1的動畫在0.5秒后開始執(zhí)行 */ }
上面的代碼展示了如何給一個元素添加延時,其中opacity代表需要應(yīng)用動畫的屬性,1s代表動畫執(zhí)行時間,ease-in-out代表緩動函數(shù),而0.5s就是延時的時間。在這個例子中,當元素被添加class為example時,在0.5秒后opacity從0到1的動畫才會開始執(zhí)行。
需要注意的是,延時不僅可以應(yīng)用在單個屬性上,同時也可以應(yīng)用在多個屬性上,如下所示:
.example { transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out 0.5s; /* opacity屬性和transform屬性的動畫都在0.5秒后開始執(zhí)行 */ }
在上面的例子中,當元素被添加class為example時,同時執(zhí)行opacity和transform屬性的動畫,在0.5秒后才會開始執(zhí)行。
最后需要注意的是,延時的值可以使用秒(s)或毫秒(ms)作為單位,但是不能使用負數(shù)。同時,不同瀏覽器對于transition屬性的支持也有所不同,需要在實際應(yīng)用中進行兼容性測試。
上一篇arm 移植php