过渡缓动不适用于背景关键帧动画

时间:2021-05-17 00:23:45

标签: css css-animations css-transitions keyframe

我实际上是在尝试在 css 上进行流畅的动画过渡,但我不明白为什么它会逐帧显示

这里是我的代码,提前致谢:

.css-selector {
background: rgb(255, 216, 0);
background: linear-gradient(90deg, rgba(255, 216, 0, 1) 95%, rgba(51, 51, 51, 1) 50%);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
animation: anim 5s ease-in-out infinite;

}

@keyframes 动画{

0% {
    background: linear-gradient(90deg, rgba(255, 216, 0, 1) 85%, rgba(51, 51, 51, 1) 50%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

50% {
    background: linear-gradient(137deg, rgba(255, 216, 0, 1) 50%, rgba(51, 51, 51, 1) 32%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

100% {
    background: linear-gradient(90deg, rgba(255, 216, 0, 1) 0%, rgba(51, 51, 51, 1) 0%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

}

和小提琴 https://jsfiddle.net/2d4uLnjb/2/

0 个答案:

没有答案