CSS3 Flag/wave Bewegung mit Text im Inneren

Question

Also arbeite ich an einem Projekt, das erfordert, dass ich eine animierte Flagge rein mit HTML5 und CSS3-Looking etwas like this und with this kind of movement.

Ich weiß, dass es einige Lösungen mit HTML-Canvas gibt, aber mein Client hat dies ausdrücklich mit CSS3 (und so wenig Javascript wie möglich) angefordert. Für den Welleneffekt, die einzige Lösung, die ich fand, war, mehrere div Elemente zu erstellen und jedes mit einer Animationsverzögerung auf dem translateY zu haben, um den Markierungsfahneneffekt alle zusammen zu schaffen (JSFiddle here) und genau dasselbe für den Text zu tun.

Ich kann auch den Text überlappen die Flagge, indem Sie den Text eine absolute Position haben, aber mein Problem ist, ich bin mir nicht sicher, wie ich die Wellenbewegung des Textes mit der Flagge koordinieren kann, so kann es genau sein gleich. Oder alternativ, wenn es eine andere Möglichkeit gibt, diese Animation zu machen (noch nicht sicher, wie ich um die Dreiecke an den Rändern arbeiten werde)? Ich weiß an image can be used to animate over it; Was wäre in diesem Fall effizienter?

Answer 1

Wir können die Animation in CSS3 mit Keyframes tun.

Sie müssen über ein transparentes Bild verfügen, das die Frames (alle Frames in einem Bild) enthält und mit Keyframes animiert wird.

Dies ist ein Beispiel wie die - 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; } 
} 

Ich hoffe, das Ihnen