html5 - css3 动画效果在微信中无效-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - css3 动画效果在微信中无效

ringa_lee 2017-04-17 13:40:49

[HTML讨论组]

624

在微信浏览器中就是

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

不会跳动和移动

上代码：

//左右过渡动画
.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%);
    }
}

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

ringa_lee

全部回复(4)

阿神2017-04-17 13:42:49 4楼

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

赞 +0

添加回复

高洛峰2017-04-17 13:42:49 3楼

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

赞 +0

添加回复

PHPz2017-04-17 13:42:49 2楼

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

赞 +0

添加回复

PHP中文网2017-04-17 13:42:49 1楼

animation:rightlate;

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

整合成一局吧

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>