CSS3 Flags / waves movement with text inside
So I'm working on a project that requires me to make an animated flag with just HTML5 and CSS3-looking something like this , and with this kind of movement .
I know there are some HTML canvas solutions, but my client specifically requested this with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create multiple elements div
and each with an animation delay on translateY
to create the flag effect all together ( JSFiddle here ) and do the same for the text.
I can also make the text overlap the flag by making the text an absolute position, but my problem is that I am not sure how I can coordinate the wave motion of the text with the flag so that it can be exactly the same, Or alternatively if there is another way to make this animation (not sure how I will work around the triangles around the edges)? I know an image can be used to animate over it ; which would be more efficient in this case?
source to share
We can animate in CSS3 using keyframes.
You should have a transparent image that will have a set of frames (all frames in one image) and animate using keyframes.
Here's one example: https://codepen.io/Guilh/pen/yldGp
HTML
<div class="monster"></div>
CSS
body {
background: #24aecd;
}
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
animation: play .8s steps(10) infinite;
}
@keyframes play {
100% { background-position: -1900px; }
}
I hope this helps you
source to share