CSS-Transformationen funktioniert nicht

Question

Ich fühle, dass dies syntaktisch korrekt ist, und entsprechend vorangestellt. Ich versuche, diese eckigen Klammern von einer Deckkraft von 0 und einer transformierten Position auf eine Deckkraft von 1 zu bringen und bei einem Hover zurück in ihre ursprüngliche Position zu übersetzen. Die Opazität ändert sich jetzt, aber nicht zum angegebenen Zeitpunkt. Die Transformationen funktionieren jedoch überhaupt nicht.

meine js fiddle ist enthalten.

.nav-tags { 
    display: inline-block; 
} 

.nav-tags::before 
.nav-tags::after{ 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 3s, opacity 2s; 
    -moz-transition: -moz-transform 3s, opacity 2s; 
    transition: transform 3s, opacity 2s; 
} 

.nav-tags::before{ 
    margin-right: 10px; 
    content: '['; 
    opacity: 0; 
    -webkit-transform: translateX(40px); 
    -moz-transform: translateX(40px); 
    transform: translateX(40px); 
} 

.nav-tags::after{ 
    margin-left: 5px; 
    content: ']'; 
    opacity: 0; 
    -webkit-transform: translateX(-40px); 
    -moz-transform: translateX(-40px); 
    transform: translateX(-40px); 
} 

.nav-tags:hover::before, 
.nav-tags:hover::after, 
.nav-tags:focus::before, 
.nav-tags:focus::after { 
    opacity: 1; 
    -webkit-transform: translateX(500px); 
    -moz-transform: translateX(500px); 
    transform: translateX(500px); 
} 
` 

https://jsfiddle.net/6dpncer1/

Answer 1

Es ist ein Syntaxfehler, daß der Rest des Codes ignoriert werden, verursacht.

.nav-tags::before // missing a comma here 
.nav-tags::after{ 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 3s, opacity 2s; 
    -moz-transition: -moz-transform 3s, opacity 2s; 
    transition: transform 3s, opacity 2s; 
} 

Dies zu beheben, wird alles wieder richtig arbeiten: https://jsfiddle.net/6dpncer1/1/