Balken Animation

Hallo zusammen, ich möchte gerne eine div Box animieren und komme nicht ganz zurecht. Es ist eigentlich ziemlich simpel, ich habe folgende Box:
#animiert { margin: 1rem; height: 2rem; background: #004402; }
Der Wert "width" im div-Tag ist variabel und wird aus einer Datenbank ausgelesen. Jetzt möchte ich, dass dieser "Balken" sobald die Seite, oder die div-Box angezeigt wird, von links nach rechts "vollläuft" auf die 80% an Breite. Kann mir dabei jemand helfen?

Der hier verwendete Code

<style> #out{ width:300px; border:1px solid black; display:block; height:30px; } #innen{ background:green; display:block; height:30px; width:0; animation:5s forwards lauf linear 1; } @keyframes lauf{ 0%{ width:0; } 100%{ width:80% } } </style> <div id="out"> <div id="innen"> </div> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!