有关css3动画描述有误,CSS3关键帧媒体查询中出现无限动画/关键帧正在出错

我开始为自己制作一个响应式组合，并遇到了一些奇怪的小故障，如动画。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关键帧动画好像它有一个很难刷新动画几秒钟后故障。

在我portfolio我有两个波，从左右去和从右向左的其他人去。

底部Big-Wave作品就像一个魅力，具有非常流畅的动画，但较小的顶部波看来，几秒钟后做一个小故障。这对我来说不是生死关头，但对我来说却是非常奇怪而且有些恼人。

下面是本节的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 */

，你会觉得可能是罪魁祸首任何意见或建议？

任何及所有帮助不胜感谢！这也是我第一次使用关键帧，所以欢迎提示！ ：]

+0

接受的答案为什么提到的第一个问题没有:) –

+0

@TienDo这不是主要问题，但我希望有人会回答。你有什么想法？ –