# transform transform은 엘리먼트의 모양을 마음대로 변형할 수 있다. transform으로 가능한 변형은 다음과 같다. 위치를 옮긴다. 회전을 시킨다. 크기를 조절한다. 박스를 비튼다. transform은 이전의 transition과 animation이랑은 다르게 속성값으로 효과를 준다. 만약 두 가지 이상의 효과를 함께 주고 싶다면 한줄에 적도록 해야한다. transition과 animation과 함께 사용하면 굉장히 많은 애니메이션 효과를 줄 수 있다. # transform 정의(Define) 어떤 모양을 가진 엘리먼트에 변형을 줄 수 있다. transform으로 줄 수 있는 속성은 크게 3가지(translate, scale, rotate)로 나눌 수 있다. translate는 해당 ..

# transition # transition-duration 정의(Define) transition이 지속되는 시간을 지정한다. 문법(Syntax) transition-duration: [number] [단위]; 예시(Sample) See the Pen CSS transition-duration by Char1ey (@char1ey95) on CodePen. # transition-delay 정의(Define) transition이 시작되는 시간을 연기해준다. 문법(Syntax) transition-duration: [number] [단위]; 예시(Sample) See the Pen CSS transition-delay by Char1ey (@char1ey95) on CodePen. # transiti..

# animation CSS에서는 animation을 이용해 역동적인 화면을 그릴 수 있다. animation 자체로 쓰기보다는 animation의 속성과 함께 써야 효과가 있다. 가장 많이 사용되는 animation 속성 위주로 알아보자. # animation-name 정의(Define) animation의 이름을 임의로 지정한다. 문법(Syntax) animation-name: [임의의 이름]; @keyframes [임의의 이름] { from{ [적용할 CSS] } to{ [적용할 CSS] } } 예시(Sample) See the Pen CSS animation-name by Char1ey (@char1ey95) on CodePen. animation-name만 줘서는 별다른 효과가 나타나지 않고, ..