title: CSS3 Flag/wave movement with text inside
body: <p>So I'm working on a project that requires me to make an animated flag purely with HTML5 and CSS3—looking something <a href="https://anaegm-canvas.000webhostapp.com/flag.jpg" rel="nofollow noreferrer">like this</a>, and <a href="https://www.youtube.com/watch?v=jUsdKd02htI" rel="nofollow noreferrer">with this kind of movement</a>.</p>
  
  <p>I know there exist some solutions with HTML canvas, but my client specifically requested this be done with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create several <code>div</code> elements and have each with an animation delay on the <code>translateY</code> to create the flag effect all together (<a href="https://jsfiddle.net/anaegm/aah90k33/5/" rel="nofollow noreferrer">JSFiddle here</a>) and do the exact same thing for the text. </p>
  
  <p>I can also make the text overlap the flag by making the text have an absolute position, but my problem is I'm not sure how I can coordinate the wave movement of the text with the flag's so it can be exactly the same. Or, alternatively, if there's another way to do this animation (not sure yet how I'm going to work around the triangles at the edges)? I know <a href="http://jsfiddle.net/viphalongpro/GEnUU/" rel="nofollow noreferrer">an image can be used to animate over it</a>; what would be more efficient in this case?</p>