CSS 애니메이션(Animation) 속성과 키프레임(keyframes)
Javascript를 사용하지 않고 CSS 내에서도 애니메이션 효과를 적용할 수 있다. transform과 transition 그리고 오늘 배울 animation이다. 앞선 transform과 transition을 포스팅하면서 transform, transition, aniamtion 3가지의 차이점에 대해 다뤄보았다. transform, transition, animation의 차이 transform 요소의 모양, 위치, 크기 등을 변형하는 데 사용된다. 목적 : 요소의 위치, 크기, 회전 등을 변형하는 데 사용된다. 작동방식 : CSS 속성을 직접 변경하여 변형을 적용한다. 활용예시 : 이미지 회전, 텍스트 이동, 요소 확대/축소 등 transition 요소의 속성 변화에 생동감 있는 애니메이션 효과..
2024. 2. 4.
CSS transform 속성 적용 방법
CSS를 움직이는 효과를 적용하는 방법에는 transform, transition, animation로 나뉜다. 이러한 속성들은 각각의 적용방법이 다르고, 용도가 다르기때문에 주의해서 익혀두어야 한다.!! 먼저, 3가지의 속성들에 대해 간단히 알아보자면 transform이란 요소에 회전, 크기 조절, 기울기 등의 효과를 부여하는 것이다. active(클릭), hover(마우스) 등의 가상 선택자로 선택된다. 특징은 주위 요소들에 영향을 끼치지 않으면서 요소의 모습을 변화시킨다는 것이다. transition이란? transform 속성에 추가로 제어 기능을 넣어주는 것이다. 예를 들면 동작 시간, timing, 지연 시간 등의 값을 넣어주는 것이다. 마찬가지로 active(클릭), hover(마우스) 등의..
2024. 1. 24.
