【发布时间】：2013-11-04 17:57:10
【问题描述】：
我开始为自己制作响应式作品集，但遇到了一些奇怪的故障，例如动画。
我的第一个问题是你能把关键帧放在媒体查询中吗？还是我需要制作两个动画并使用媒体查询从一个切换到另一个？
如果您转到投资组合 => 将窗口最小化为移动视图 => 我的云/鸟/波浪动画的大小将保持为桌面大小，除非您刷新页面，否则不会更改。
@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 */
您认为可能是罪魁祸首的任何想法或建议？
非常感谢任何和所有帮助！这也是我第一次使用关键帧，所以欢迎提示！ :]
【问题讨论】：
-
接受的答案为什么没有提到第一个问题:)
-
@TienDo 这不是主要问题，但我希望有人能回答。你有什么想法吗？
标签： html css css-animations