출처 : 코딩 자율학습 도서
transform 속성
주위 요소들에 영향을 끼치지 않으면서 요소의 모습을 바꾸어 준다. 즉 시각적인 요소만 변경한다고 볼수 있음.
어떠한 것들을 가운데로 배치하기 위해서 flex레이아웃을 쓰기 애매할 때에 위 transform 속성을 통해서 해결 가능.
transform:<함수>;
eg
translage() 함수는 요소를 현재 위치에서 일정 거리만큼 이동하고 싶을 때 사용. x축은 오른쪽 y축은 아래쪽으로 이동. 왼쪽이나 위쪽은 음수를 주면 된다.
transition 속성
CSS 값이 달라질 때 요소에 어떤 효과로 반영될지 지정. 속성, 지속시간, 시간함수, 지연시간 순으로 값을 넣을 수 있음.
transition-property:<속성값>;
+++ 08.07
animation 속성
애니메이션은 정지된 이미지를 연속적으로 보여 줘서 움직이는 것처럼 보이게 한다. 이런 애니메이션 효과를 전환 효과에 부여해야 하기에 키프레임(@keyframes)을 정의해서 실행해야 한다.
키 프레임은 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법이기에 키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의 되어야한다.
@keyframe<키 프레임명>{
0%{css코드}
n%{css코드}
100%{css코드}
}
애니메이션은 기본으로 1회 실행하고 종료된다. 이때 animation-iterator-count 속성을 사용하면 실행 횟수를 조절할 수 있다.
해야 되는 일이 하고 싶은 일로