divを100％の幅に拡大

Question

これは私がStackOverflowの投稿から取った例です。同様の効果が欲しいですが、divの上にマウスを置くと拡大します。しかし、私はページがCSSだけを介して読み込まれるときに展開したい。私はjqueryを通してそれを達成することができますが、私はそれだけでCSSを使ってやりたがっています。誰も助けることができますか？

.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

ここでは、ページのロード

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

Answer 2

はあなたのソリューションだけCSS3を使用しているとき、それは完全な幅になるように、このクラスを追加してください、あなたはアニメーションプロパティ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>