Expandieren div zu einer 100% Breite

Question

Nun, das ist ein Beispiel, das ich aus StackOverflow Beitrag genommen habe Ich möchte den ähnlichen Effekt haben, aber es erweitert, wenn ich über das div schweben. Aber ich möchte erweitern, wenn die Seite nur über CSS geladen wird. Ich kann es durch jQuery erreichen, aber ich möchte es nur durch CSS machen lassen. Kann jemand helfen?

.wrapper { 
 
    background:#DDD; 
 
    display:inline-block; 
 
    padding: 10px; 
 
    height: 20px; 
 
    width:auto; 
 
} 
 

 
.label { 
 
    display: inline-block; 
 
    width: 1em; 
 
} 
 

 
.contents, .contents .inner { 
 
    display:inline-block; 
 
} 
 

 
.contents { 
 
    white-space:nowrap; 
 
    margin-left: -1em; 
 
    padding-left: 1em; 
 
} 
 

 
.contents .inner { 
 
    background:#c3c; 
 
    width:0%; 
 
    overflow:hidden; 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
} 
 

 

 

 
.wrapper:hover .contents .inner { 
 
    
 
    width:100%; 
 
}

<div class="wrapper"> 
 
    <span class="label">+</span><div class="contents"> 
 
     <div class="inner"> 
 
      These are the contents of this div 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Bitte fügen Sie diese Klasse, so dass es volle Breite sein wird, wenn Seite geladen

.wrapper .contents .inner 
    { 
    width:100%; 
    animation-name: example; 
animation-duration: 4s; 
    } 
    @keyframes example { 
     0% {width:0%;} 
     100% {width:100%;} 
    } 

Answer 2

Hier ist Ihre Lösung nur css3 verwenden, können Sie die Eigenschaft Animation überprüfen Here.

.wrapper { 
 
    background:#DDD; 
 
    display:inline-block; 
 
    padding: 10px; 
 
    height: 20px; 
 
    width:auto; 
 
} 
 

 
.label { 
 
    display: inline-block; 
 
    width: 1em; 
 
} 
 

 
.contents, .contents .inner { 
 
    display:inline-block; 
 
} 
 

 
.contents { 
 
    white-space:nowrap; 
 
    margin-left: -1em; 
 
    padding-left: 1em; 
 
} 
 

 
.contents .inner { 
 
    background:#c3c; 
 
    width:0%; 
 
    overflow:hidden; 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
} 
 

 

 
.inner { 
 
    width: 0px; 
 
    background-color: red; 
 
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */ 
 
    animation-name: example; 
 
    animation-duration: 2s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes example { 
 
    from {width: 0px;} 
 
    to {width: 100%;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    from {width: 0px;} 
 
    to {width: 100%;} 
 
}

<div class="wrapper"> 
 
    <span class="label">+</span><div class="contents"> 
 
     <div class="inner"> 
 
      These are the contents of this div 
 
     </div> 
 
    </div> 
 
</div>