코드 그라데이션

16. 에니메이션 본문

Front/Mega-CSS

16. 에니메이션

완벽한 장면 2023. 6. 4. 11:57

키프레임(keyframe)

  • 에니메이션 중간에 스타일이 바뀌는 지점
  • @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.

 

자주 사용하는 에니메이션 속성

 

 

1) 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성

  • 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.

 

  • 또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다.
  • 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다.

 

  • @keyframes 속성에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킨다.

ex) 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가한다.

      시작과 끝 위 치만 사용하려면 0%, 100%와 같은 값 대신 from과 to라는 키워드를 사용해도 된다.

 


2) animation-duration : 애니메이션의 실행 시간을 지정

  • animation-duration 속성은 애니메이션을 얼마동안 재생할 것인지 설정한다.

  • 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위
  • 기본값은 0
  • animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.

 

예제1 - 3초 동안 애니메이션 실행되게 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Animation Test1</title>
	<style>
		#container{
			width:500px;
			margin:20px auto;
		}
		.box{
			width: 100px;
			height: 100px;
			float:left;
			margin:50px;
		}
		#box1 {
			background-color: orange;
			border: 1px solid transparent;
			animation-name: shape;  /* 애니메이션 지정 */ 
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
            animation-iteration-count: infinite;
		}
		#box2 {
			background-color: blue;
			border: 1px solid transparent;
			animation-name: rotate;  /* 애니메이션 지정 */
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
            animation-iteration-count: infinite;
		}

		@keyframes shape { /* shape 애니메이션 정의 */
			from {
				border: 1px solid transparent;  /* 1px짜리 투명한 테두리 */
			}
			to {
				border: 1px solid #000;  /* 검정색 테두리 */
				border-radius: 50%;  /* 테두리를 둥글게 */
			}
		}

		@keyframes rotate {  /* rotate 애니메이션 정의 */
			from {
				transform:rotate(0deg)  /* 시작은 0도에서 */
			}
			to {
				transform: rotate(75deg);  /* 75도까지 회전 */
			}
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="box" id="box1"></div>
		<div class="box" id="box2"></div>
	</div>
</body>
</html>

 

실행 결과

3) animation-direction : 애니메이션의 방향을 지정

  • 기본적으로 keyframes 에서 정의한 from->to 순서로 움직임
  • 그런데 이 속성을 이용해서 진행 방향을 바꿀 수 있음.

속성값

 

4) animation-iteration-count : 반복 횟수를 지정

  • 애니메이션을 반복해서 보여줘야 할 때는 animation-iteration-count 속성을 사용해 반복 횟수를 정한다.

속성값

 

 

4) animation-timing-function : 애니메이션의 속도 곡선을 지정

  • 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만든다.

 

 

5) 애니메이션의 속성을 한꺼번에 표기하는 animation 속성

  • 한 줄씩 따로따로 작성하지 않고 한꺼번에 표기하는 방법.
  • 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 것.
  • 실행 시간을 지정하지 않으면 기본값으로 0이 적용(효과 나타나지 x)

 

 

마지막 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Animation Test2</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin: 60px auto;      
      animation: rotate 1.5s infinite, background 1.5s infinite alternate;
    }

    @keyframes rotate {  /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
      from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
      50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
      to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
    }
    @keyframes background {  /* 배경색 빨강 -> 초록 -> 파랑 */
      from { background-color: yellow; }
      50% { background-color: orange; }
      to { background-color: red; }
    }
  </style>
</head>
<body>
	<div class="box">	</div>
</body>
</html>

실행 결과

 

 

 

728x90

'Front > Mega-CSS' 카테고리의 다른 글

18. 미디어 쿼리  (0) 2023.06.05
17. 반응형 웹  (0) 2023.06.04
15. 트랜지션  (6) 2023.06.03
14. 변형  (1) 2023.06.03
13. 가상 클래스와 가상 요소  (0) 2023.05.17
'Front/Mega-CSS' Related Articles more
Comments