Here's the deal:
There's a <header> tag with three background images: a wave, a boat, and another wave. I know I can use the animation property of CSS to animate the entire header according to some keyframe. But how do I animate each individual background image if I want each to do something different?
Right now I have something like:
header:hover {
-moz-animation: waves 1s alternate infinite;
}
@-moz-keyframes waves {
from { -moz-transform: translate(-2em,0em) rotate(-2deg); }
to { -moz-transform: translate(2em,0em) rotate(2deg); }
}
Which affects the entire header (naturally). How do I animate each background image individually without placing each in its own div? (And yes, I know -moz-animation works only for Mozilla browsers, but I'll add the others later).
Much appreciated!
There's a <header> tag with three background images: a wave, a boat, and another wave. I know I can use the animation property of CSS to animate the entire header according to some keyframe. But how do I animate each individual background image if I want each to do something different?
Right now I have something like:
header:hover {
-moz-animation: waves 1s alternate infinite;
}
@-moz-keyframes waves {
from { -moz-transform: translate(-2em,0em) rotate(-2deg); }
to { -moz-transform: translate(2em,0em) rotate(2deg); }
}
Which affects the entire header (naturally). How do I animate each background image individually without placing each in its own div? (And yes, I know -moz-animation works only for Mozilla browsers, but I'll add the others later).
Much appreciated!