🧞 animation?

매력있는 웹 페이지를 만들려면 가상 선택자로는 아직 부족합니다. 살짝 밋밋한 웹 페이지을 animation을 사용해서 더 개성있게 꾸밀 수 있습니다. 오늘은 CSS animation의 기초를 살펴보겠습니다.

🍪 animation 속성과 하위 속성

animation를 적용하기 위해선 여러 하위 속성들을 정의해줘야합니다. 중요한 3가지 하위 속성들을 알아보겠습니다.

animation-name

animation-name은 애니메이션의 동작을 표현하는 @keyframes 이름을 설정합니다. @keyframes에 대해서는 뒤에 알아보겠습니다.

animation-duration

animation-duration은 애니메이션이 동작될 시간을 나타내는 속성입니다.

animation-iteration-count

animation-iteration-count은 애니메이션이 몇번 동작할지 나타내는 속성으로 무한히 반복하려면 infinte로 지정하면 됩니다.

🔑 @keyframes 작성법

@keyframes는 함수와 비슷한 형태를 띄고 있습니다. 그 안에는 최소 2개의 중간 상태를 정의해줘서 애니메이션이 어떻게 동작할지를 정의합니다. 0%와 100%를 정의해주면 처음 상태와 마지막 상태까지 애니메이션이 동작하게 됩니다.

좌우로 왕복하는 이미지를 만들어야 한다 생각해봅시다. loop을 만들기 위해서는%0와 %100가 같은 곳을 가르키면 됩니다.

예시

@keyframes loop{
    0%{
    	top:0px;
    	left:0px;
    }
    50%{
    	top:0px;
    	left:300px;
    }
    100%{
        top:0px;
        left:0px;    
    }
}

div{
	position: relative;
   	background-color: gray;
   	width: 110px;
   	height: 300px;
	animation: loop 1.1s infinite;
}

위와 같은 스타일을 HTML 문서에 적용하면 아래의 gif와 같은 동작을 보여줍니다.