css3 - safari页面的一出设置了css动画,影响页面其他地方文字的font-weight
迷茫
迷茫 2017-04-17 11:22:35
0
1
589

正常状态

动画状态

最后动画执行完又变回正常状态

 animation-duration: 3s;
    animation-name:listAnimation;
    animation-fill-mode: both;
    -webkit-animation-duration: 3s;
    -webkit-animation-name:listAnimation;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 3s;
    -moz-animation-name:listAnimation;
    -moz-animation-fill-mode: both;
    -o-animation-duration: 3s;-o-animation-name:listAnimation;-o-animation-fill-mode: both;
    animation-fill-mode: both;
@-webkit-keyframes listAnimation {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -moz-transform: perspective(400px) rotateY(90deg);
        -o-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity:0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        -moz-transform: perspective(400px) rotateY(-10deg);
        -o-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        -o-transform: perspective(400px) rotateY(10deg);
        -moz-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -moz-transform: perspective(400px) rotateY(0deg);
        -o-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
}
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(1)
大家讲道理

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
试过强制在keyframe里指定font-weight吗?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!