在眾多瀏覽器中,雖然IE8的用戶數量已經越來越少,但是在某些應用中仍然需要兼容IE8。而css3動畫較為流行,在實現時需要注意一些兼容性問題,下面介紹一些在兼容IE8的css3動畫中需要注意的事項。
/* 1、使用過渡代替動畫 */ .box { height: 100px; /* 使用過渡完成高度從0到100px的動畫 */ -webkit-transition: height 1s; transition: height 1s; } .box:hover { height: 200px; } /* 2、使用animate.css */ /* animate.css是一個預定義的純CSS的動畫類庫,既兼容高級的瀏覽器,也兼容較老的瀏覽器 */ /* 引入animate.css */ <link rel="stylesheet" />/* 使用 */ <div class="box animated bounceInLeft"></div>/* 3、使用JavaScript添加類 */ /* 可以使用JavaScript來添加類來實現動畫 */ // 定義動畫類 .move { -webkit-transition: left 500ms; transition: left 500ms; } // 添加'box'類的'move'動畫 var box = document.querySelector('.box'); box.classList.add('move'); // 隱藏'box' box.classList.add('hidden');
通過以上方式,我們可以實現在兼容IE8的情況下使用css3動畫效果。需要注意的是,對于一些高級的動畫效果,在IE8下可能會出現效果不佳的情況,因此應該謹慎使用,并進行充分測試。
上一篇css選擇器具
下一篇css選擇器制作代碼