[css] html 요소에 애니메이션 주기

web/html css

[css] html 요소에 애니메이션 주기

xudegloss 2023. 3. 19. 22:57

transform을 이용하여 변형을 주고, transition 또는 animation을 이용하여 그 변화를 부드럽게 보여준다.
transition은 어떤 동작을 실행하였을 때 변형을 보여주고, animation은 동작 없이 계속 변형을 보여준다.

1. transition

변화를 부드럽게 보여주는 속성 중 하나이다. 어떤 동작을 실행하였을 때 주어진 시간 만큼 변형을 보여준다.

- transition-property : 어떤 속성에 효과를 줄 것인지 지정하기.

- transition-duration : 변형에 시간을 지정한다. (s 또는 ms로 지정하기.)

- transition-timing-function : 속도 패턴을 지정한다. 제일 많이 쓰는 함수가 ease-in-out이다.

- transition-delay : 기다려야되는 시간의 양을 지정한다. 즉, 순서를 지정할 때 많이 이용한다.

transition도 단축 속성이다. 단축 속성은 순서가 중요하다. property > duration > timing-function > delay 순으로 적어주기.

transition과 가장 많이 이용되는 것은 transform인데, property를 all 또는 transform으로 지정하고 애니메이션을 지정하면 좋다.

2. transform

이동, 회전, 확대 또는 축소, 비틀기 등의 변형 효과를 줄 수 있다.

회색 박스가 기존의 박스이고, 보라색 박스가 변형을 준 박스이다. 여러 요인을 잘 이용하여 변형을 줄 수 있다.

요소 좌표를 움직이기	양수 음수 모두 입력 가능하다. 요소를 움직일 수 있다. transform : transition(x 방향, y 방향) transitionX와 transitionY 또한 존재한다.
축소 또는 확대하기	1을 기준으로 축소 또는 확대할 수 있다. 1보다 크면 확대하는 것이고, 1보다 작으면 축소하는 것이다. transform : scale을 이용하면 된다. scaleX와 scaleY 또한 존재한다.
기울임 적용하기	deg (degree 각도를 의미한다.) 를 이용하여 기울임을 적용할 수 있다. transition : skew(x 방향 각도, y 방향 각도) skewX와 skewY 또한 존재한다.
회전하기	deg (degree 각도를 의미한다.) 를 이용하여 회전을 적용할 수 있다. transition : rotate(각도)를 이용하면 된다. rotateX와 rotateY 또한 존재한다. 양수이면 시계 방향으로 회전한다.

주의할 점은 가상 선택자를 이용하는 경우 inline 요소로 들어가기 때문에 반드시 block으로 변경하기.

3. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform</title>
    <link rel="stylesheet" href="./transform__practice.css" />
  </head>
  <body>
    <div class="container">
      <div class="move__transform transform">
        <div class="move__before before"></div>
        <div class="move__after after">move</div>
      </div>
      <div class="scale__transform transform">
        <div class="scale__before before"></div>
        <div class="scale__after after">scale</div>
      </div>
      <div class="skew__transform transform">
        <div class="skew__before before"></div>
        <div class="skew__after after">skew</div>
      </div>
      <div class="rotate__transform transform">
        <div class="rotate__before before"></div>
        <div class="rotate__after after">rotate</div>
      </div>
    </div>
  </body>
</html>

4. css 코드

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Sono:wght@600&family=Tilt+Warp&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
  font-family: "Sono", sans-serif;
  font-family: "Tilt Warp", cursive;
}

.container {
  margin: 50px;
}

.transform {
  padding: 15px;
  position: relative;
}

.before {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
  border: 3px dashed #c4c4c4;
}

.after {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 200px;
  height: 200px;
  background-color: slateblue;
  border: 3px dashed black;
  color: white;
  font-weight: 600;
  font-size: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.move__after {
  transform: translate(100px, 100px);
  z-index: 2;
}

.scale__after {
  transform: scale(1.5);
  z-index: 1;
}

.skew__before {
  z-index: 0;
}

.skew__after {
  transform: skew(15deg, 20deg);
  z-index: 3;
}

.rotate__after {
  transform: rotate(30deg);
  z-index: 4;
}

5. animation

변화를 부드럽게 보여주는 속성 중 하나이다. 어떤 동작을 실행 여부와 상관 없이 계속 변형을 보여준다. 여러 이미지를 연결하여 자연스럽게 움직이는 것처럼 보이게 하는 기법이다.

transition	특정 이벤트 기점으로 작동시킬 수 있다.
animation + keyframe	특정 이벤트가 필요 없고, 시작 반복 정지까지 제어 가능하다. 애니메이션을 정의하고, 불러와서 제어까지 해야되는 과정을 거친다.

/* css 애니메이션의 시작, 중간, 끝 등의 중간 상태를 정의하기. */
@keyframes 애니메이션 이름{
	from{ /* 시작 지점의 css */
    }to{  /* 종료 지점의 css */
       }
}

from, to 대신에 %로 표현 가능하다. %로 표현하면 중간 과정까지 표시가 가능하다.

위 과정은 하나의 애니메이션 동작을 정의하는 과정이다. 순서에 주의하자.

- animation-name : 애니메이션 이름 지정하기.

- animation-duration : 애니메이션 시간 지정하기.

- animation-direction : 애니메이션 재생 방향 지정하기. normal / reverse / alternate / alternate-reverse

- animation-iteration-count : 애니메이션 반복 횟수 지정하기.

- animation-timing-function : 애니메이션 속도 지정하기.

- animation-delay : 애니메이션 지연 시간 지정하기.

애니메이션 방향과 반복 횟수는 관련성이 있다. 반복 횟수를 무한으로 잡았을 때 정방향으로 가는지 역방향으로 가는지 지정할 수 있기 때문이다. 애니메이션도 단축 속성이니 순서에 주의하기.

alternate : 무한대 + 정방향
alternate-reverse : 무한대 + 역방향

6. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Animation Quiz</title>
    <link rel="stylesheet" href="./25-animation-quiz.css" />
    <script
      src="https://kit.fontawesome.com/116a85af51.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div class="item heart__scale">
        <h3 class="title">애니메이션 예시 1</h3>
        <i class="fa-solid fa-heart"></i>
      </div>
      <div class="item star__rotate">
        <h3 class="title">애니메이션 예시 2</h3>
        <i class="fa-solid fa-star"></i>
      </div>
      <div class="item mouse__scroll">
        <h3 class="title">애니메이션 예시 3</h3>
        <div class="scroll">
          <div class="scroll__left">
            <div class="left__body"></div>
            <div class="left__wheel"></div>
            <div class="text">scroll</div>
          </div>
          <div class="scroll__right">
            <div class="right__body"></div>
            <div class="right__wheel"></div>
            <div class="text">scroll</div>
          </div>
        </div>
      </div>
      <div class="item rotate__right">
        <h3 class="title">애니메이션 예시 4</h3>
        <i class="fa-solid fa-rotate-right"></i>
      </div>
    </div>
  </body>
</html>

7. css 코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  height: 600px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.title {
  background-color: #eeeeee;
  width: 200px;
  text-align: center;
}

.fa-heart {
  width: 42px;
  height: 42px;
  color: rgb(224, 0, 52);
  animation-name: heartEnlarge;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes heartEnlarge {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.fa-star {
  width: 42px;
  height: 42px;
  color: rgb(255, 215, 57);
  animation-name: starRotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes starRotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.scroll {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.scroll__left {
  height: 80px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  animation-name: moveScroll;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes moveScroll {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-20px);
  }
}

.left__body {
  width: 30px;
  height: 50px;
  border: 2px solid black;
  border-radius: 20px;
}

.left__wheel {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 5px;
  height: 10px;
  border: 2px solid black;
  border-radius: 10px;
  background-color: black;
}

.scroll__right {
  height: 80px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.right__body {
  width: 30px;
  height: 50px;
  border: 2px solid black;
  border-radius: 20px;
}

.right__wheel {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 5px;
  height: 10px;
  border: 2px solid black;
  border-radius: 10px;
  background-color: black;
  animation-name: moveWheel;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes moveWheel {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-4px);
  }
}

.fa-rotate-right {
  width: 42px;
  height: 42px;
  animation-name: rotateRight;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes rotateRight {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

저작자표시

'web > html css' 카테고리의 다른 글

[css] 반응형 Layout (0)	2023.03.20
[css] grid Layout (0)	2023.03.20
[css] position (0)	2023.03.19
[css] 배경과 색상 (0)	2023.03.10
[css] 캐스케이딩 (0)	2023.03.09

현재글[css] html 요소에 애니메이션 주기

Security Engineer

js, javascript, Cyworld, codecamp, 네트워크, setinterval, 보안관제, flex, CSS, 토이프로젝트, node.js, 네트워크관리사2급, 국비지원, Trouble Shooting, html, github, 패스트캠퍼스, BOJ, 인프라, D-day Counter,

Today :
Yesterday :

TechLabs