Html 将div扩展到100%宽度

这是我从StackOverflow post中得到的一个例子，我希望有类似的效果，但当我将鼠标悬停在div上时，它会展开。但是当页面仅通过css加载时，我希望展开。我可以通过jquery实现它，但我只想通过css实现它。有人能帮忙吗

.wrapper{
背景：DDD；
显示：内联块；
填充：10px；
高度：20px；
宽度：自动；
}
.标签{
显示：内联块；
宽度：1米；
}
.contents、.contents.inner{
显示：内联块；
}
.目录{
空白：nowrap；
左边距：-1米；
左：1米；
}
.目录.内部{
背景：#c3c；
宽度：0%；
溢出：隐藏；
-webkit过渡：宽度为1s，易于输入输出；
-moz过渡：宽度1s，易于输入输出；
-o型过渡：宽度为1s，易于进出；
过渡：宽度1s，易于进出；
}
.wrapper:hover.contents.inner{
宽度：100%；
}

+
这些是这个部门的内容

请添加该类，以便在加载页面时该类为全宽

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

---

这是仅使用css3的解决方案，您可以检查动画属性

.wrapper{
背景：DDD；
显示：内联块；
填充：10px；
高度：20px；
宽度：自动；
}
.标签{
显示：内联块；
宽度：1米；
}
.contents、.contents.inner{
显示：内联块；
}
.目录{
空白：nowrap；
左边距：-1米；
左：1米；
}
.目录.内部{
背景：#c3c；
宽度：0%；
溢出：隐藏；
-webkit过渡：宽度为1s，易于输入输出；
-moz过渡：宽度1s，易于输入输出；
-o型过渡：宽度为1s，易于进出；
过渡：宽度1s，易于进出；
}
.内部{
宽度：0px；
背景色：红色；
-webkit动画名称：示例；/*Safari 4.0-8.0*/
-webkit动画持续时间：2s；/*Safari 4.0-8.0*/
动画名称：示例；
动画持续时间：2秒；
动画填充模式：正向；
}
/*Safari 4.0-8.0*/
@-webkit关键帧示例{
从{width:0px；}
到{宽度：100%；}
}
/*标准语法*/
@关键帧示例{
从{width:0px；}
到{宽度：100%；}
}

+
这些是这个部门的内容

不，不，我希望当页面加载时，它从0%宽度变为100%宽度。好的，我休息到那时！：干得好！非常感谢：）oops刚刚发布了一个类似的答案，没有看到Shabu已经这么做了：（我的坏抱歉againI猜测Shabu的解决方案可以完成工作，但它会循环过程，所以添加

动画填充模式：转发；

来解决它