検索

ホームページ  >  に質問  >  本文

css3 - safari页面的一出设置了css动画,影响页面其他地方文字的font-weight

正常状态

动画状态

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

 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;
    }
}
迷茫迷茫2782日前599

全員に返信(1)返信します

  • 大家讲道理

    大家讲道理2017-04-17 11:24:35

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

    返事
    0
  • キャンセル返事