keyframes

keyframes?

• 웹에서 애니메이션을 구현할 때 trasition과 animation이라는 스타일 속성을 많이 사용한다.
• transition은 단순한 엘리먼트의 상태변화에 사용하기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다.
• Keyframes는 animation에서 사용하는 속성 중 하나이다!

---

animation 속성

• animation은 8가지 속성을가지고 있다.
• css에서 animation의 예시는 아래와 같다.

div {
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: forward;
}

animation-name

• keyframe에 적용할 애니메이션 이름.

animation-duration

• 애니메이션이 완료될때까지 걸리는 시간

animation-timing-function

• 애니메이션 실행 속도
• linear: 동작이 시작할 때부터 완료될 때까지 시간이 일정
• ease: 동작 시작이 천천히 흘러가다 중간에 빠르게 끝에서 천천히 흘러감
• ease-in: 동작 시작 서서히 흘러가다 중간부터 끝까지 빠르게 변환
• ease-out: 동작 시작이 빠르게 흘러가다 마지막에 서서히 느려짐
• ease-in-out: 동작 시작과 끝이 느리게 흘러감
• cubic-bezier(n, n, n, n): 베지어 함수로 속도를 조절

animation-delay

• 애니메이션이 시작하기 전 지연시간

animation-iteration-count

• 반복 횟수

animation-direction

• 애니메이션 방향
• normal: 기본값 (forwards)
• reverse: 역방향으로 진행
• alternate: 애니메이션이 앞으로 진행된 후 역방향으로 번갈아 진행
• alternate-reverse: 애니메이션이 역방향으로 진행된 후 앞으로 번갈아 진행

animation-fill-mode

• 애니메이션 시작 전, 끝나기 전, 시작 전과 끝나기 전의 스타일을 지정
• none: 기본값 (따로 적용되지 않음)
• forwards: 마지막 keyframe에 의해 설정된 스타일을 유지(애니메이션 방향 및 애니메이션 반복 횟수에 따라 다르다)
• backwards: 첫번째 keyframe에 설정된 스타일 값을 가져오고 애니메이션 지연 기간 동안 값을 유지
• both: 애니메이션이 앞 뒤 모두에 대한 규칙을 따름

animation-play-state

• 애니메이션 실행 여부
• running: 기본 값 (애니메이션 실행)
• paused: 애니메이션 일시 중지

 

---

@keyframes

• animation은 실행할 애니메이션의 속성을 지정하는 단계였고 @keyframes은 애니메이션의 구체적인 스타일을 제어한다.
• 첫번째로 animation에서 지정했던 animation-name을 지정하고 두번째로 애니메이션의 구체적인 구간(from, to, 0%, 100% 등..)을 지정하고 css 스타일을 적용한다.

 

• from은 애니메이션의 시작 부분이고 to는 끝나는 지점이다.

@keyframes example {
    from {opacity: 0;}
    to {opacity: 1;}
}

• from, to와 마찬가지로 0%는 애니메이션의 시작 부분이고 100%는 끝나는 지점이다.

@keyframes example {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

 

 

---

animation 간단하게 사용하기

• animation의 8가지 속성 중 기본값이 있는 속성을 제외한 나머지 속성을 나열해서 사용할 수 있다.
• 아래처럼 간단하게 html 엘리먼트에 animation 속성값을 줘서 animation을 간단하게 사용할 수 있다.

// animation: name duration timing-function delay iteration-count direction 
[html 엘리먼트] { animation: [애니메이션이름] [실행 시간] [지연시간] [반복횟수] [속도] [방향] }

div{ animation: example 2s 1s infinite linear alternate; }

@keyframes example {
    from {opacity: 0;}
    to {opacity: 1;}
}

---

CSS에서 keyframes 사용 예시

• 아래 코드를 보면 box라는 엘리먼트에 animation 속성이 들어있는데 animation 속성에 boxFade가 있고 boxFade를 보면 keyframes로 boxFade를 정의했다.
• boxFade를 보면 0% 50% 100% 가 있다. 0%는 2초동안 돌아갈 때 시작점이고 100%는 2초가 되는 순간이다.
• 엘리먼트가 시작하기 전 1초의 딜레이를 가지고 2초동안 1초마다 투명도가 1에서 0으로 0에서 1으로 서서히 바뀌는 예시이다.

.box {
 width: 100px;
 height: 100px;
 background: #444;
 animation: boxFade 2s 1s infinite linear alternate;
}

@keyframes boxFade {
  0% {
   opacity: 1;
  }
  50% {
   opacity: 0;
  }
  100% {
   opacity: 1;
  }
}

---

React에서의 keyframes

• 리액트에서 keyframes은 styled-components 패키지 안에 들어있다.
• styled-components란? https://duckgugong.tistory.com/179?category=1034573

styled-components

• styled-components에서 keyframes를 임포트한 다음 아래처럼 빽틱으로 감싸서 애니메이션을 넣어줄 수 있다.

const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;

  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;

예시코드

import React from 'react';
import './App.css';

// keyframes 임포트
import styled, { keyframes } from "styled-components";

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}

const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;

  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;
const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;


export default App;