-
애니메이션(Animation)프론트엔드/CSS 2020. 9. 16. 03:31
애니메이션란?
HTML에 적용되는 CSS스타일을 다른 CSS스타일로 바꿀 때 부드럽게 변화시킨다.
애니메이션은 애니메이션 대상이 되는 CSS스타일과 애니메이션 시퀀스를 나타내는 복수의 키프레임으로 이뤄진다.
애니메이션과 트랜지션
물론 트랜지션으로도 애니메이션 효과를 나타낼 순 있으나 animation 그 자체보단 제한적이다.
그리고 트랜지션은 꼭 자바스크립트가 있거나 가상 클래스 선택자가 있어야 움직인다.
하지만 애니메이션은 그런것 없이 혼자 가능하다.
애니메이션은 트랜지션보다 더 나아가 그 안에서 세부적인 움직임, 시간 등도 구현이 가능하다.
애니메이션과 자바스크립트
물론 CSS애니메이션은 컴퓨터 리소스면에선 효율적이긴하다.
다만 경우에 따라 자바스크립트를 사용하는 것이 더 편하게 사용할 수 있기도 하다.
간단한 CSS는 CSS내내의 애니메이션 기능을 쓰고 어려운건 자바스크립트로 처리하자.
아래는 네모난 상자가 옆으로 움직이는 애니메이션이다.
<style> div{ position: absolute; width: 150px; height: 150px; animation-name: move, fadeout, changeColor; /* 애니메이션 이름 지정 */ animation-duration: 10s; /* 애니메이션 지속 시간 */ animation-iteration-count: infinite; /* 애니메이션 반복 횟수 */ } @keyframes move{ /* 옆으로 움직이는 애니메이션에 대한 키프레임*/ from { left: 0;} /* 시작은 0에서 */ to { left: 700px; } /* 끝은 700px */ } @keyframes fadeout{ /* 점차 사라지는 애니메이션에 대한 키프레임 */ from { opacity: 1;} /* 시작은 투명도 1에서 */ to { opacity: 0; } /* 시작은 투명도 0으로 */ } @keyframes changeColor{ /* 색상이 변하는 애니메이션에 대한 키프레임 */ from { background-color: red;} /* 시작은 red에서 */ to { background-color: green; } /* 끝은 green으로 */ } </style> <body> <div> </div> </body>'프론트엔드 > CSS' 카테고리의 다른 글
트랜지션 (transition) (0) 2020.09.16 CSS 속성값 단위(px, rem, em) (0) 2020.09.15 reset CSS (0) 2020.09.15 플렉스 박스: 'align-content' (0) 2020.08.27 플렉스 박스: 'flex-wrap ' (0) 2020.08.27