-webkit- 애니메이션 브라우저 호환성

일부 CSS 연습 일부 롤오버 버튼을 만들고 -webkit을 사용하여 -webkit은 크롬 및 사파리에서만 호환된다는 말을 들었습니다. 그래서 다른 브라우저에서 애니메이션을 작동 시키려면 어떤 코드를 추가해야합니까?-webkit- 애니메이션 브라우저 호환성

HTML : : 여기 내 코드는 당신이이 시간에 전혀 CSS3 애니메이션을 사용하지 않는 것이 좋습니다 브라우저 간 호환성을 보장하고, 대신이 일을 jQuery를 효과 같은 것을 사용하려면

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" href="main.css"> 
    <title>Rollover buttons</title> 
</head> 
<body> 
    <article> 
     <p id="button">Button!</p> 
    </article> 
</body> 
</html> 


body{ 
    text-align:center; 
} 
#button{ 
    display:block; 
    border:2px solid green; 
    margin:150px 400px; 
    background:#604085; 
    color:#ffffff; 
    width:100px; 
    height:50px; 
    -webkit-border-radius:30px; 
    -webkit-transition:background 0.5s,width 0.5s, height 0.5s; 
} 
#button:hover{ 
    background:#67e456; 
    width:110px; 
    height:60px; 
}

출처

2012-09-24 corrigan_sam

공급 업체의 접두사를 읽으십시오. – BoltClock

transition: opacity 0.5s linear; /* vendorless fallback */ 
-o-transition: opacity 0.5s linear; /* opera */ 
-ms-transition: opacity 0.5s linear; /* IE 10 */ 
-moz-transition: opacity 0.5s linear; /* Firefox */ 
-webkit-transition: opacity 0.5s linear; /*safari and chrome */

공급 업체 프리픽스에 대해 읽으려는 경우. 다음은 주석이 포함 된 단순 불투명 전환의 예입니다.

은 최신 브라우저 지원까지 여기를 보라 - @BoltClock는 지적 http://caniuse.com/

출처

2012-09-24 15:06:00 SpaceBeers

감사합니다. 아이 코드를 포함하고 공급 업체 접두사를 살펴보십시오. –

너를 위해서.

출처

2012-09-24 15:02:15 PhonicUK

는 -webkit는 공급 업체 접두사입니다. 그러나 제한된 금액 인 support from other vendors for animation이 있으며 애니메이션이 receiving attention/formalization from the W3 일 때 증가 할 것으로 예상됩니다.

transition (CSS에서 표시)과 애니메이션 (제목에서 참조)은 서로 다른 접두어와 W3 문서로 구분됩니다.

출처

2012-09-24 15:07:53

또한과 같이 롤오버에 대한 이미지 스프라이트를 사용할 수 있습니다

.button { 
background-image: src(../images/soandso.jpg); 
background-image: top left; 
width: 45px; 
height: 15px; 
} 

.button:hover { 
background-image: src(../images/soandso.jpg); 
background-image: bottom left; 
width: 45px; 
height: 15px; 
}

다음 당신은 당신이 성취하려는 어떤 효과 나에 페이드에 대한 jQuery를 사용할 수 있습니다.

출처

2012-09-24 15:12:46 Ben

-webkit- 애니메이션 브라우저 호환성

답변

관련 문제