전환 :되지는 DIV에 사파리

Question

전환 작동 후 :

HTML :

.bbtn { 
 
    width: 151px; 
 
    height: 48px; 
 
    background: #ef2e41; 
 
    margin: auto; 
 
    margin-top: 32px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    position: relative; 
 
    border: 2px solid #5f121a; 
 
} 
 
.bbtn input { 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: none; 
 
    border: 0; 
 
    width: 100%; 
 
    padding: 6px 0; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 
.bbtn:hover { 
 
    border: 2px solid #373737; 
 
} 
 
.bbtn::after, 
 
.bbtn::before { 
 
    content: ""; 
 
    position: absolute; 
 
    -webkit-transition: all 0.9s ease-in-out; 
 
    -moz-transition: all 0.9s ease-in-out; 
 
    -o-transition: all 0.9s ease-in-out; 
 
    -ms-transition: all 0.9s ease-in-out; 
 
    transition: all 0.9s ease-in-out; 
 
    width: 0%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: #202020; 
 
} 
 
.bbtn:hover::after { 
 
    width: 100%; 
 
    -webkit-transition: all 0.9s ease-in-out; 
 
    -moz-transition: all 0.9s ease-in-out; 
 
    -o-transition: all 0.9s ease-in-out; 
 
    -ms-transition: all 0.9s ease-in-out; 
 
    transition: all 0.9s ease-in-out; 
 
}

<div class="bbtn"> 
 
    <input name="" type="submit" value="search"> 
 
</div>

하지 사파리에 따라 의 작품이에 대한 코드가 후 여기 내 fiddle을 찾을 수 있습니다.

Answer 1

사파리 버전은 무엇입니까? Safari 6.1 이상에서만 지원됩니다.

참조 : http://css-tricks.com/transitions-and-animations-on-css-generated-content/