Übergänge von Formen in CSS funktioniert nicht

Question

Ich habe versucht, einige einfache CSS-Experimente für den Übergang Formen mit CSS erstellt.

Ich kann es mit jQuery gut machen, aber ich versuche, die Dinge so leicht wie möglich zu halten für das eigentliche Projekt, das ich mir vorstelle. Ich habe Google ziemlich oft benutzt (und W3schools), um all das aufzufrischen, aber ich beginne mich zu fragen, ob alle nur jQuery heutzutage benutzen.

Wie auch immer. Ich möchte einen Kreis erweitern, um eher wie Kapsel aussehen. Der Code ist unten.

http://pastebin.com/piXXrmEu

nicht sicher, was mir fehlt. Brauche einfach den Kreis, um eine Breite von 700 px zu erhalten. Derzeit funktioniert es in keinem Browser. Es muss jedoch in allen IE-Browsern funktionieren.

Answer 1

Nicht sicher, auf welcher Veranstaltung Sie wollen, dass der Kreis zu erweitern, aber hier ist ein Beispiel eines Kreises zu einer ‚Kapsel‘ Form erweitert onHover nur mit 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

Flexiblere Variante wird mit Animation, ich glaube,

#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 
    } 
} 

Beispiel here