Question

我开始为自己制作一个响应式的投资组合，并遇到一些奇怪的故障，比如动画。

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

如果你去投资组合=＆gt;最小化窗口到移动视图=＆gt;我的云/鸟/波浪动画的大小保持为桌面大小，除非您刷新页面，否则不会改变。

@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 */

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

任何和所有帮助非常赞赏！这也是我第一次使用关键帧，欢迎提示！：

Portfolio

JSFIDDLE

Answer 1

transform: translate();是硬件加速的，在制作动画时应该更顺畅。例如，使用translateY代替bottom的小波浪不那么波动：http://jsfiddle.net/fE9t9/。

/* 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); }
}

注意：动画仅支持IE10 +;没有版本支持-ms-前缀所以应该取出它。

translate动画稍快一些;如果只应用于1波，则可以看到轻微的不协调。因此translateY应该应用于两个wave以使它们同步。根据您的喜好，可能需要对波浪的时间/移动进行一些新的调整。

Answer 2

至于第一个问题，你可以把它们放在你想要的地方，但它不会像你希望的那样工作。它确实改变了动画本身，但新装修的动画不适用于元素。您需要使用一些小js将其切换到新的

（应该）解决第二个问题的一种方法是使动画持续时间x倍大，并使背景位置x倍大。 Example here。

我建议清理你的代码格式，但它会更容易跟随它，也许会显示一个你不考虑的隐藏问题

CSS3关键帧无限动画/关键帧在媒体查询中是不明智的

2 个答案: