css3 同時載入兩個動畫

最近在做h5，遇到這樣的需求（如題）

.cur .p1d1d4

@keyframes p1d1d4

100%

}@-webkit-keyframes p1d1d4

100%

正常情況下基本思路是：

監聽webkitanimationend動畫結束以後再add另乙個class

1 document.queryselector('.p1d1d4').addeventlistener("webkitanimationend",function(e))

這樣的話兩個動畫連線在一起（自己腦補效果），但是這樣做有個問題是如果這個方案是單頁面形式的，回到之前頁面過後會發現這個頁面始終保留在p1d1d4scale的動畫結束效果，如果想再次執行之前的效果的話，可能要把之前的class效果去掉然後再加上

但是我想在乙個class中實現這個效果怎麼實現呢

pasting在這裡我想到了transition

簡單介紹一下這個屬性

這個方法有4個屬性

transition-property 指定緩動的屬性

transition-duration 緩動的執行時間

transition-timing-function 緩動型別

transition-delay 在指定時間之後執行（延期執行）

說道這裡大家應該就懂了

.cur .p1d1d4

動畫結束之後2秒執行，分享到此結束

從今天起我打算隨心一些寫部落格，可能會基本的分享思路和方案或者技巧，言外之意就是可能會很簡短，我上次的隨筆 react demo是真東西，可以直接上手專案，全域性es6寫法 webpack打包載入熱載入 react-router 總之匯集了乙個小的demo，歡迎關注