Question

我偶然发现一个问题，其中线性渐变关键帧动画不想用于chrome和Mozilla但适用于IE。会发生什么：在动画开始时，渐变显示在从{位置然后向右跳到{位置没有平滑移动就像在IE上一样。我认为它忽略了动画，因为从{到{发生在1.0秒内发生，无论我在动画持续时间选项中放置多少秒，IE都会识别这些变化。尝试使用百分比，尝试将所有内容放在一个关键帧下，没有任何效果。其他动画如缩放和不透明度适用于所有浏览器。

请指教！

#topBody{
    position: relative;
    z-index: 2;
    margin-top: 10px;
    width: 100%;
    height: 120px;
    background: -ms-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -webkit-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -moz-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    background: -o-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    border: none;
    box-shadow: 0px 5px 10px #696969, 0px -3px 10px #696969;
    animation: anim1 3s ease-out;
    -webkit-animation: anim1 3s ease-out;
    -moz-animation: anim1 3s ease-out;
}

@keyframes anim1{
    from{
        background: -ms-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -ms-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}

@-webkit-keyframes anim1{
    from{
        background: -webkit-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -webkit-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}

@-moz-keyframes anim1{
    from{
        background: -moz-linear-gradient(-45deg, black 0%, ghostwhite 1%, black 1%);
    }
    to{
        background: -moz-linear-gradient(-45deg, black 80%, ghostwhite 85%, black 85%);
    }
}

css -webkit-linear-gradient animation

0 个答案: