CSS3 Keyframe infinite animation/keyframes inside a media query being glitchy - html

Question

I started to make a responsive portfolio for myself and ran into some weird glitch like animations.
My first question is can you put keyframes inside of a media query? or do I need to make two animations and use the media query to switch from one to the other?
If you go to the portfolio => minimize the window to a mobile view => the size of my cloud/bird/waves animations stay as the desktop size and don't change unless you refresh the page.
#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 */
}
My second(main) question is an infinite CSS3 keyframe animation seems to glitch after a few seconds like it's having a hard refresh to the animation.
On my portfolio I have two waves that goes from left-right and the other one goes from right-left.
The bottom Big-Wave works like a charm and has a very smooth animation but the smaller top wave seems to do a minor glitch after a few seconds. This isn't life or death to me but is very odd and slightly annoying to me.
Here is the css for this section:
.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;
}
}
Here is the keyframes for the wave animation:
/* 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 */
Any ideas or suggestions that you would think may be the culprit?
Any and all help is GREATLY appreciated! This is also my first time with keyframes so tips are welcomed! :]
Portfolio
JSFIDDLE

Answer 1

transform: translate(); is hardware accelerated and should move smoother when animating. For example, the small wave using translateY instead of bottom is less choppy: 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); }
}
Note: animations are only supported IE10+; no version supports the -ms- prefix so it should be taken out.
translate animates slightly quicker; a slight discoordination would be visible if applied to only 1 wave. So translateY should be applied to both waves to make them synchronize. Depending on your preferences, it might be necessary to make some new adjustments to the timing/movement of the waves.

Answer 2

As for the first issue, you can put them where you want but it doesn't work like you hope. It does indeed change the animation itself, but that newly renovated animation is not applied to the elements. You need to use a little js to switch it over to the new one
One way that (should) fix the second problem is to make the animation duration x times larger and making the background position x times larger as well. Example here.
I'd recommend cleaning up your code formatting though, it would make following it easier and perhaps show a hidden issue you're not accounting for