旧 webkit bug : css 伪类不支持 css3 动画

之前一个网站做一个css3加载动画，为了“节省” html ，就直接在 body 上使用伪类来做。

相关代码是这样的：

html, body {
    background: #fff;
    height: 100%;
    font-size: 100%;
}
body {
    overflow: hidden;
    position: relative;
}
body:before, body:after {
    content: '';
    width: 30px;
    height: 30px;
    display: block;
    border: 3px solid #d2d2d2;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -18px;
    top: 50%;
    margin-top: -18px;
}
body:after {
    border: 3px solid transparent;
    border-top-color: grey;
    -webkit-animation: rotate 1s infinite linear;
    -moz-animation: rotate linear 1s;
    -moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rotate {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

预览地址：http://jsbin.com/wilemolage/1/edit?html,css,output 效果还不错，并且 html 结构也很好。但是在 iOS 6 上转圈动画不动。就觉得很奇怪，排除代码错误。于是 Google 一番： Transitions and animations do not apply to CSS ::before and ::after pseudo-elements

LoeiFy / Recordum

旧 webkit bug : css 伪类不支持 css3 动画 #2

相关代码是这样的：

相关链接：