将 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 的解决方案，您可以在此处检查动画属性。

.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>