在CSS中转换形状不起作用

Question

我一直在尝试运行一些简单的css实验来转换用css创建的形状。

我可以用jQuery来做到这一点，但我想尽量保持重量轻，以便实现我真正想要的项目。我一直在使用谷歌（和W3schools）来研究所有这些，但我开始怀疑现在每个人是否只使用jQuery。

无论如何。我想展开一个看起来更像胶囊的圆圈。代码如下。

http://pastebin.com/piXXrmEu

不知道我错过了什么。只需要该圆圈即可获得700px的宽度。它目前不在任何浏览器中工作。虽然它需要在所有IE浏览器中工作。

Answer 1

不知道你想要什么活动圈子扩大，但这里是扩大到“胶囊”形状的圆的例子onHover选项只使用CSS：https://jsfiddle.net/1cdatxq2/

#circle { 
    width: 300px; 
    height: 300px; 
    background: orange; 
    -moz-border-radius: 300px; 
    -webkit-border-radius: 300px; 
    border-radius: 300px; 
    transition: width .5s; 
} 

#circle:hover{ 
    width: 700px; 
} 

Answer 2

更灵活的将是变异与动画，我觉得

#circle { 
    width: 150px; 
    height: 150px; 
    background: orange; 
    border-radius: 300px; 
    animation: run 2s 
} 

@keyframes run { 
    0% { 
    width: 200px 
    } 
    25% { 
    width: 300px 
    } 
    50% { 
    width: 400px 
    } 
    75% { 
    width: 500px 
    } 
} 

例here