Html CSS3关键帧无限动画/媒体查询中的关键帧出现故障

我开始为自己制作一个反应迅速的投资组合，但遇到了一些奇怪的问题，比如动画

我的第一个问题是能否在媒体查询中放置关键帧？或者我需要制作两个动画并使用媒体查询从一个切换到另一个

如果您转到公文包=>将窗口最小化为移动视图=>我的云/鸟/波动画的大小保持为桌面大小，除非刷新页面，否则不会更改

@media only screen and (max-width: 680px) {
    /* Clouds CSS3 animations */

    @-webkit-keyframes Clouds-Size {
        from {
            width: 25%;
        }
        50% {
            width: 30%;
        }
        to {
            width: 25%;
        }
    }
    @-moz-keyframes Clouds-Size {
        from {
            width: 25%;
        }
        50% {
            width: 30%;
        }
        to {
            width: 25%;
        }
    }
    @-ms-keyframes Clouds-Size {
        from {
            width: 25%;
        }
        50% {
            width: 30%;
        }
        to {
            width: 25%;
        }
    }

    /* End Clouds CSS3 Animation */

    /* Big Wave CSS3 animations */

    @-webkit-keyframes Wave-Big-Size {
        from {
            height: 10em;
        }
        50% {
            height: 9em;
        }
        to { 
            height: 10em;
        }
    }
    @-moz-keyframes Wave-Big-Size {
        from {
            height: 10em;
        }
        50% {
            height: 9em;
        }
        to { 
            height: 10em;
        }
    }
    @-ms-keyframes Wave-Big-Size {
        from {
            height: 10em;
        }
        50% {
            height: 9em;
        }
        to { 
            height: 10em;
        }
    }

    /* End Big Wave CSS3 Animation */
}

我的第二个（主要）问题是一个无限CSS3关键帧动画在几秒钟后似乎出现了小故障，好像对动画进行了硬刷新

在我的电脑上，有两个波从左到右，另一个从右到左

底部的

大波浪

非常有魅力，动画非常流畅，但较小的顶部波浪在几秒钟后似乎出现了小故障。这对我来说不是生死攸关，但对我来说是非常奇怪和有点恼人的

以下是本节的css：

.bigWave {
    background: url(../images/bigWave.svg) repeat-x;
    height: 7em;
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
    -moz-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
    -ms-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
    -o-animation: Wave-Big 500s linear infinite, Wave-Big-Size 5s ease-in-out infinite;
}

@media only screen and (max-width: 680px) {
  .bigWave {
    height: 10em;
  }
}

.smallWave {
    background: url(../images/smallWave.svg) repeat-x;
    height: 6em;
    width: 100%;
    position: absolute;
    bottom: 4em;
    -webkit-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
    -moz-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
    -ms-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
    -o-animation: Wave-Small 500s linear infinite, Wave-Small-Size 5s ease-in-out infinite;
}

@media only screen and (max-width: 680px) {
  .smallWave {
    height: 12em;
  }
}

以下是波浪动画的关键帧：

/* Big Wave CSS3 animations */

@-webkit-keyframes Wave-Big {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: 1300% 0%
    }
}
@-webkit-keyframes Wave-Big-Size {
    from {
        height: 7em;
    }
    50% {
        height: 6em;
    }
    to { 
        height: 7em;
    }
}
@-moz-keyframes Wave-Big {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: 1300% 0%
    }
}
@-moz-keyframes Wave-Big-Size {
    from {
        height: 7em;
    }
    50% {
        height: 6em;
    }
    to { 
        height: 7em;
    }
}
@-ms-keyframes Wave-Big {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: 1300% 0%
    }
}
@-ms-keyframes Wave-Big-Size {
    from {
        height: 7em;
    }
    50% {
        height: 6em;
    }
    to { 
        height: 7em;
    }
}

/* End Big Wave CSS3 Animation */

/* Small Wave CSS3 animations */

@-webkit-keyframes Wave-Small {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: -1300% 0%
    }
}
@-webkit-keyframes Wave-Small-Size {
    from {
        bottom: 4em;
    }
    50% {
        bottom: 3em;
    }
    to { 
        bottom: 4em;
    }
}
@-moz-keyframes Wave-Small {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: -1300% 0%
    }
}
@-moz-keyframes Wave-Small-Size {
    from {
        bottom: 4em;
    }
    50% {
        bottom: 3em;
    }
    to { 
        bottom: 4em;
    }
}
@-ms-keyframes Wave-Small {
    from {
        background-position: 5% 5%
    }
    to { 
        background-position: -1300% 0%
    }
}
@-ms-keyframes Wave-Small-Size {
    from {
        bottom: 4em;
    }
    50% {
        bottom: 3em;
    }
    to { 
        bottom: 4em;
    }
}

/* End Small Wave CSS3 Animation */

你认为可能是罪魁祸首的任何想法或建议

非常感谢所有的帮助！这也是我第一次使用关键帧，因此欢迎使用提示！：]

---

至于第一期，你可以把它们放在你想放的地方，但它不能像你希望的那样工作。它确实会更改动画本身，但新修复的动画不会应用于元素。您需要使用一点js将其切换到新的

解决第二个问题的一种方法是将动画持续时间

x

放大几倍，并将背景位置

x

放大几倍

---

不过，我建议您清理代码格式，这样会使后续工作更容易，并且可能会显示一个您没有考虑的隐藏问题。

对于第一个问题，您可以将它们放在您想要的地方，但它不能像您希望的那样工作。它确实会更改动画本身，但新修复的动画不会应用于元素。您需要使用一点js将其切换到新的

解决第二个问题的一种方法是将动画持续时间

x

放大几倍，并将背景位置

x

放大几倍

不过，我建议您清理代码格式，这样做会使后续工作更容易，并且可能会显示一个隐藏的问题，您没有考虑这个问题

transform:translate（）

是硬件加速的，在设置动画时应该移动得更平滑。例如，使用

translateY

而不是

bottom

的小波浪起伏较小：

注意：动画仅支持IE10+；没有版本支持-ms-前缀，因此应将其删除

translate

动画制作速度稍快；如果仅应用于1个波，则会出现轻微的不协调。因此，应将

translateY

应用于两个波，以使它们同步。根据您的偏好，可能需要对波浪的计时/移动进行一些新的调整。

transform:translate（）

是硬件加速的，在设置动画时应该移动得更平滑。例如，使用

translateY

而不是

bottom

的小波浪起伏较小：

注意：动画仅支持IE10+；没有版本支持-ms-前缀，因此应将其删除

---

translate

动画制作速度稍快；如果仅应用于1个波，则会出现轻微的不协调。因此，应将

translateY

应用于两个波，以使它们同步。根据您的喜好，可能需要对波浪的时间/运动进行一些新的调整。

谢谢您的努力，我下班回家后会尝试一下。您的答案和xeepete的混合让它更加流畅，谢谢！谢谢你的努力，我下班回家后会尝试一下。你的答案和xeepete的混合让事情变得更加顺利，谢谢！接受答案为什么提到第一个问题没有：）@TienDo这不是主要问题，但我希望有人能回答。你有什么想法吗？被接受的答案为什么第一个问题被提及没有：）@TienDo这不是主要问题，但我希望有人能回答。你有什么想法吗？

/* Small Wave CSS3 animations */

@-webkit-keyframes Wave-Small {
    from { background-position: 5% 5% }
    to { background-position: -1300% 0% }
}
@-webkit-keyframes Wave-Small-Size {
    from, to { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(1em); }
}
@-moz-keyframes Wave-Small {
    from { background-position: 5% 5% }
    to { background-position: -1300% 0% }
}
@-moz-keyframes Wave-Small-Size {
    from, to { -moz-transform: translateY(0); }
    50% { -moz-transform: translateY(1em); }
}
@-o-keyframes Wave-Small {
    from { background-position: 5% 5% }
    to { background-position: -1300% 0% }
}
@-o-keyframes Wave-Small-Size {
    from, to { -o-transform: translateY(0); }
    50% { -o-transform: translateY(1em); }
}
@keyframes Wave-Small {
    from { background-position: 5% 5% }
    to { background-position: -1300% 0% }
}
@keyframes Wave-Small-Size {
    from, to { transform: translateY(0); }
    50% { transform: translateY(1em) }
}


/* Big Wave CSS3 animations */

@-webkit-keyframes Wave-Big {
    from { background-position: 5% 5% }
    to { background-position: 1300% 0% }
}
@-webkit-keyframes Wave-Big-Size {
    from, to { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(1em); }
}
@-moz-keyframes Wave-Big {
    from { background-position: 5% 5% }
    to { background-position: 1300% 0% }
}
@-moz-keyframes Wave-Big-Size {
    from, to { -moz-transform: translateY(0); }
    50% { -moz-transform: translateY(1em); }
}
@-o-keyframes Wave-Big {
    from { background-position: 5% 5% }
    to { background-position: 1300% 0% }
}
@-o-keyframes Wave-Big-Size {
    from, to { -o-transform: translateY(0); }
    50% { -o-transform: translateY(1em); }
}
@keyframes Wave-Big {
    from { background-position: 5% 5% }
    to { background-position: 1300% 0% }
}
@keyframes Wave-Big-Size {
    from, to { transform: translateY(0); }
    50% { transform: translateY(1em); }
}