Hallo zusammen,
ich möchte gerne eine div Box animieren und komme nicht ganz zurecht.
Es ist eigentlich ziemlich simpel, ich habe folgende Box:
<div class="prehelp"><pre class="html_code"><div id="animiert" style="width:80%"></div>
#animiert {
margin: 1rem;
height: 2rem;
background: #004402;
}</pre></div>
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?
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>