css3 动画效果在微信中无效

Question

在微信浏览器中就是

在微信浏览器 动画没有效果

不会跳动和移动

上代码：

//左右过渡动画
.sign-progress1 span.rightlate{
   position: relative; 
}
.sign-progress1 span.rightlate:after{
    position: absolute;
    top: -0.845rem;
    content: '';
    display: inline-block;
    width: 0.77rem;
    height:1.086rem;
    background: url(../img/sign_style_active_top.png) no-repeat;
    background-size: 100%;
    animation:rightlate;
    -webkit-animation: rightlate;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes rightlate{
    from{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to{
       -webkit-transform: translateX(0%);
       transform: translateX(0%);
    }
}
@keyframes rightlate{
    from{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to{
       -webkit-transform: translateX(0%);
       transform: translateX(0%);
    }
}

请问大神我哪里有问题么？

Answer 1

因为微信和QQ内置的浏览器一样，都是阉割过渲染引擎的，当然还有其他方面也被阉割了。

Answer 2

你把你代码格式化一下，可能是多写的括号什么的。我以前也遇到过，css的样式有问题，你检查一遍
然后看下你微信的版本
首先，确保微信浏览器内核支持CSS3 2D/3D Transforms。
Android版本的微信：
6.1版本以上是QQ浏览器的X5内核(blink)。
5.4­6.1之间的版本，若用户安装了QQ浏览器就是使用的X5内核，若用户未安装浏览器，使用的是系统内核
(webkit)。
5.4以下用的是系统内核。
iPhone版本的微信：
直接使用的系统内核(webkit)

Answer 3

问题在于你的动画加在了伪类元素上了，这个微信有些不支持Android6.0无问题

Answer 4

animation:rightlate;

-webkit-animation: rightlate;
animation-duration: 1s;
-webkit-animation-duration: 1s;

整合成一局吧