@keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법

@-moz-keyframes

@-webkit-keyframes

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }

  to {
   margin-left:0%;
   width:100%;
 }
}

크로스 브라우징 이슈를 해결하기 위해 접두사를 붙여줍니다.

  • 크롬&사파리 : -webkit-
  • 파이어폭스 : -moz-
  • 오페라 : -o-
  • 인터넷 익스플로러 : -ms-

 


  • 참고

https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068

https://pro-self-studier.tistory.com/108

'TIL > 개념정리' 카테고리의 다른 글

API 쉽게 이해하기  (0) 2022.07.19
Framer-motion 간단한 사용법 정리  (0) 2022.07.16
styled-components 문법 정리  (0) 2022.07.13
File upload 취약점  (0) 2022.07.12
CSRF와 방어 방법이 무엇인지  (0) 2022.07.09
복사했습니다!