значок меню переход не работает в firefox

Question

Я нашел эту анимацию в кодефене. Но для какой-либо причине это не будет работать в Firefox

Вы можете увидеть анимацию здесь: http://codepen.io/awesomephant/pen/zxBKBe

CSS:

rect { 
    fill: red; 
    transition: 300ms; 
    transform-origin: center; 
    border-radius: 3px; 
} 

svg { 
    overflow: visible; 
    width: 100px; 
    height: 50px; 
} 

.toast { 
} 

.boom { 
    rect { 
    fill: black; 
    } 

    .cheese { 
    transform: translateY(25px) rotate(45deg); 
    } 

    .toast { 
    transform: translateY(-25px) rotate(-45deg); 
    } 
} 

Answer 1

Так это должно работать как в Chrome и Firefox: http://codepen.io/anon/pen/KpBjPJ

div { 
padding: 10%; 
} 

rect { 
fill: red; 
transition: 300ms; 
border-radius: 3px; 
} 

svg { 
overflow: visible; 
width: 100px; 
height: 50px; 
} 

.toast { 
} 

.boom { 
    rect { 
    fill: black; 
    } 

    .cheese { 
    transform: rotate(45deg); 
    } 

    .toast { 
    transform: translateX(-40px) translateY(35px) rotate(-45deg); 
    } 
} 

Я думаю, что проблема кроется в том, что Firefox не поддерживает преобразование-источник для SVG.