@keyframes1 [CSS] @keyframes / animation 속성 / 애니메이션 구현 1. keyframes @keyframes는 각 구간에서 어떤 스타일로 모션을 적용시킬지 정하는 문법입니다. IE는 버전 10 이상에서 사용할 수 있습니다. 크롬, 사파리는 -webkit- 만 붙이면 거의 모든 버전 가능합니다. 문법 @keyframes name{ 0%{ } 100%{ } } name - keyframes가 적용될 이름을 정합니다. 0% - 시작할 때 적용될 구간 100% - 끝날 때 적용될 구간 예제 @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } 2. Animation animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다. animation 축약형 animati.. 2020. 5. 30. 이전 1 다음