[CSS] 애니메이션 기초

soryeongk·2021년 9월 17일
1

EliceAITrack

목록 보기
2/4
post-thumbnail

1. transform

transform은 특정 영역에 회전, 확대/축소, 각도 변경, 위치 변경 등의 효과를 적용할 때 사용됩니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 상 우 하  : 시계 방향
    	margin: 200px, 0 0 200px;
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

상기 코드로 기본 세팅을 하면 다음과 같이 빨간 네모가 생성됩니다.

1-1. rotate()

transform의 속성 중 회전을 위한 속성값입니다.
괄호 안에 {각도}deg를 넣으면 해당 각도만큼 오른쪽으로 회전을 합니다. 음수를 넣으면 왼쪽으로 회전합니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 상 우 하  : 시계 방향
    	margin: 200px, 0 0 200px;
    	transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

결과 화면

1-2. scale()

확대 또는 축소를 위해 사용되는 속성값입니다.
괄호 안에 {가로 몇 배}, {세로 몇 배}의 형태로 입력을 하면 숫자만큼 확대가 됩니다. 음수를 넣으면 해당 숫자만큼 축소됩니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 상 우 하  : 시계 방향
    	margin: 200px, 0 0 200px;
    	transform: scale(2, 3);
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

결과 화면

1-3. translate()

위치를 이동할 수 있는 속성값입니다.
괄호 안에 {x좌표}, {y좌표}의 형태로 입력하면, 해당 좌표로 이동합니다. 좌표의 기준은 좌측상단 꼭짓점입니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 상 우 하  : 시계 방향
    	margin: 200px, 0 0 200px;
    	transform: translate(100px, 200px);
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

결과화면(상자의 위치가 이동했습니다!)

1-4. skew()

각도를 비트는 속성값입니다.
괄호 안에 {x축방향 각도}, {y축방향 각도}의 형태로 입력하면 됩니다. 음수를 넣으면 반대 방향으로 비틀어집니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 상 우 하  : 시계 방향
    	margin: 200px, 0 0 200px;
    	transform: skew(10deg, 20deg);
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

x축으로 10도만 비틀었을 때(transform: skew(10deg);)

y축으로 20도 비틀었을 때(transform: skew(0, 20deg);)

2. transition

특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용됩니다.
효과를 확인하기 위해서 :hover를 추가해 마우스가 위로 올라갔을 때 변화가 나타날 수 있도록 하겠습니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	// 1번 자리
    }
    
    .box:hover {
    	width: 300px;
    	// 2번 자리
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

transition: width 2s linear 1s;을 입력하면, 다음과 같은 의미가 됩니다.
width 속성이 변화하는데,
2초 동안 효과가 일어날 것이고
linear에 의해 효과 속도는 일정할 것입니다.
1초 후에 효과가 나타나도록 delay를 줍니다.

이 코드를 1번 자리에 넣게 되면
마우스를 박스 위에 올렸을 때 1초 뒤에 width가 300px로 스르륵 늘어나고, 마우스를 떼면 다시 스르륵 제자리로 돌아옵니다.

2번 자리에 넣게 되면
1번 자리에 넣었을 때와 유사하지만, 마우스를 떼었을 때 뿅! 하고 제자리로 돌아와있습니다.

목표하는 효과에 맞추어 결정하면 됩니다!

3. animation

특정 지점별로 애니메이션 효과를 적용할 때 사용됩니다.
속성의 작성 순서는 name duration timing-function delay iteration-count direction 입니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	animation: changeWidth 3s linear 1s 6 alternate;
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

상기 코드에서 animation: changeWidth 3s linear 1s 6 alternate;를 해석해보면,

changeWidth라는 이름의 애니메이션을 만들어 3초동안 효과를 유지하게 합니다. linear를 통해 효과가 일정한 시간 분배로 일어날 수 있도록 하며 1초의 delay를 줍니다. 또한 애니메이션은 6번 반복하고 direction을 alternate로 설정하여 앞뒤로 반복하게 합니다.

하지만 상기 코드는 애니메이션을 정의했을 뿐 어떤 요소에 어떻게 효과를 실행할지에 대한 이야기가 없습니다.
@keyframes를 사용합니다.

<head>
  <style>
    .box {
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	animation: changeWidth 3s linear 1s 6 alternate;
    }
    @keyframes changeWidth {
    	from {
    		width: 300px;
   		}
    	to {
    		width: 600px;
    	}
    }
  </style>
</head>
<body>
  <div class='box'></div>
</body>

changeWidth라는 이름을 가진 애니메이션에 대해서 너비를 300px에서 600px로 변화하게 하겠다는 것을 의미합니다.

profile
웹 프론트엔드 개발자 령이의 어쩌구 저쩌구

0개의 댓글