@-webkit-keyframes 와 @keyframes의 차이

@-webkit-keyframes 와 @keyframes의 차이

[참고] 웹 브라우저 엔진

- WebKit, Blink, Gecko, Trident는 모두 웹 브라우저 엔진으로, - 웹 페이지의 렌더링, HTML, CSS 및 JavaScript 코드의 해석 및 실행, 그리고 기타 웹 기술의 처리를 담당합니다. - 자세히 : https://noanomal.tistory.com/201

 

 

차이점

@-webkit-keyframes는 WebKit 기반 브라우저(예: Chrome, Safari)에서 사용되며, -webkit-이라는 접두사(prefix)가 있습니다. 반면에 @keyframes는 모든 브라우저에서 지원되며, 접두사가 필요하지 않습니다.

 

 

@-webkit-keyframes 사용이유

@-webkit-keyframes를 굳이 사용하는 이유는 WebKit 기반 브라우저(예: Chrome, Safari)에서만 지원되는 특정한 기능을 사용하기 위해서입니다.  또한, WebKit 기반 브라우저는 현재 모바일 기기에서 많이 사용되는 브라우저 중 하나이기 때문에, 모바일 웹사이트를 만들 때 @-webkit-keyframes를 사용하는 것이 좋습니다. 그러나, @-webkit-keyframes를 사용할 때에는 해당 접두사를 가진 다른 브라우저에서도 같은 애니메이션을 보여주기 위해 해당 접두사를 사용하는 것이 좋습니다. 따라서, 모든 브라우저에서 동일하게 보여주기 위해서는 @keyframes와 함께 -webkit-을 추가하여 사용하는 것이 좋습니다.

 

@keyframes와 함께 -webkit-을 추가하여 사용하는 방법

@keyframes myAnimation {
  /* 애니메이션 키프레임 정의 */
}

/* Safari, Chrome, 및 Opera 브라우저에서 사용되는 접두사 */
@-webkit-keyframes myAnimation {
  /* 애니메이션 키프레임 정의 */
}

/* 애니메이션을 적용할 요소에 대한 CSS 속성 */
.element {
  animation-name: myAnimation;
  -webkit-animation-name: myAnimation; /* Safari, Chrome, 및 Opera 브라우저에서 사용되는 접두사 */
  animation-duration: 1s;
}