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

Question

正常状态

动画状态

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

 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;
    }
}

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Have you tried forcing font-weight to be specified in the keyframe?