CSS3 動畫坑——Animation,偽類

前幾天,做了兩css3動畫,一個loading動畫,一個logo 動畫。
測試發(fā)現(xiàn)這兩動畫,在一臺神機(華為 G-L75 os :Android 4.3)上不動!
此機乃手機中的IE。當然移動端不能像pc 測瀏覽器版本,和種類就可以了。移動端還是設備有關系??偛荒芨鞣N設備來一臺,簡直要翔。

demo
<style type="text/css">
 .div1{
    width:200px;
    height:200px;
    position: relative;
} 
.div1::before{
  content:"1234";
  position:absolute;
  width:100%;
  height:100%;
  background:#f00;
  -webkit-animation: test 2s linear 0s infinite;
  animation: test 2s linear 0s infinite;
}
 @-webkit-keyframes test { 
0% {  background:#f00;  } 
100% {  background:#0f0; } 
} 
@keyframes test { 
0% {  background:#f00;  } 
100% {  background:#0f0; } 
}
</style>
<body>
 <div class="div1"></div>
</body>
jdfw.gif
結果

此機型 不是不支持 動畫,而是 **不支持 偽元素 使用動畫 **,包括 transform 動畫。

補充
Paste_Image.png

caniuse 上邊 Android 4.4 以前的支持度是未知的。本人測試 加 -webkit- 之后是被支持的。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,917評論 25 709
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,857評論 2 45
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,172評論 4 61
  • 耳邊經(jīng)常會聽到這樣的豪言壯語“要么減肥,要么死”“一白遮百丑,一胖毀所有”······抬眼望去,說這些話的人各...
    220d64285ade閱讀 239評論 0 0
  • 最近在看一本書——《不跪著教書》,思考頗多。 其一,關乎誠信 一直以來,我同許多人說過我想要當老師,始終覺得教師是...
    little銫閱讀 197評論 0 0

友情鏈接更多精彩內(nèi)容