
@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
'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 |