@keyframes - animation 사용법
@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