사소한 개발지식/로드맵(FE)

[로드맵] FrontEnd - CSS #4

2023. 1. 25. 19:48
목차
  1. 4. Animation
  2. @keyframes
  3. animation-name
  4. animation-duration
  5. animation-timing-function
  6. animation-delay
  7. animation-iteration-count
  8. animation-direction
  9. animation-fill-mode
  10. animation-play-state
728x90
반응형

Fron-end 로드맵 중 Front-end 부분 - 드림코딩

https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상

CSS

4. Animation

애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다.

 

@keyframes

키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다.

<html>
<head>
  <style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    /* @keyframes rule */
    @keyframes move {
      /* keyframe */
      from {
        left: 0;
      }
      /* keyframe */
      to {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

animation-name

사용하고자 하는 keyframe 룰을 적용하기 위해 사용하는 프로퍼티. 하나 이상의 애니메이 이름을 지정할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      animation-name: move, fadeOut, changeColor;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    @keyframes changeColor {
      from { background-color: red; }
      to   { background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 지정(s, ms). 지정하지 않을 경우 0s로 설정되어 애니메이션이 동작 X

 

animation-timing-function

애니메이 효과를 위한 수치 함수를 지정한다. animation-timing-function 설명

 

animation-delay

요소가 로드된 시점과 애니메이션이 시작하는 시점 사이에 대기하는 시간을 지정(s, ms)

 

animation-iteration-count

애니메이션 주기의 재생 횟수. 기본값은 1이고 infinite로 무한반복할 수 있다.

 

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정.

  1. normal : 기본값으로 from에서 to로 진행
  2. reverse : to에서 from으로 진
  3. alternate : 홀수번째는 normal, 짝수번째는 reverse로 진행
  4. alternate-reverse : 홀수번째는 reverse, 짝수번째는 normal로 진
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: myAnimation 5s infinite;
      /*홀수번째는 normal로, 짝수번째는 reverse로 진행*/
      animation-direction: alternate;
    }
    @keyframes myAnimation {
      0%   { background: red;    left: 0px;   top: 0px; }
      25%  { background: yellow; left: 200px; top: 0px; }
      50%  { background: blue;   left: 200px; top: 200px; }
      75%  { background: green;  left: 0px;   top: 200px; }
      100% { background: red;    left: 0px;   top: 0px; }
    }
  </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 

animation-fill-mode

애니메이션 미실행 시(대기, 종료) 요소의 스타일을 지정한다.

none 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards 대기 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  종료 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both 대기 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  종료 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      font: bold 1em/100px san-serif;
      text-align: center;
      color: #fff;
      background: red;
      margin-bottom: 10px;
      position: relative;
      /*name duration timing-function delay iteration-count direction fill-mode play-state*/
      animation: myAnimation 2s linear 2s;
    }
    div:nth-of-type(1) {
      animation-fill-mode: none;
    }
    div:nth-of-type(2) {
      animation-fill-mode: forwards;
    }
    div:nth-of-type(3) {
      animation-fill-mode: backwards;
    }
    div:nth-of-type(4) {
      animation-fill-mode: both;
    }
    @keyframes myAnimation {
      0%   { left: 0px;   background: yellow; }
      100% { left: 200px; background: blue; }
    }
  </style>
</head>
<body>
  <h1>animation-fill-mode</h1>

  <div>none</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.</p>
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.</p>

  <div>forwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

  <div>backwards</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  <p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

  <div>both</div>
  <p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
  <p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
</body>
</html>

 

animation-play-state

애니메이 재생 상태를 지정한다. 기본값은 running.

 

https://poiemaweb.com/css3-animation - 참고
728x90
반응형
저작자표시 (새창열림)
  1. 4. Animation
  2. @keyframes
  3. animation-name
  4. animation-duration
  5. animation-timing-function
  6. animation-delay
  7. animation-iteration-count
  8. animation-direction
  9. animation-fill-mode
  10. animation-play-state
'사소한 개발지식/로드맵(FE)' 카테고리의 다른 글
  • [로드맵] FrontEnd - JavaScript #2
  • [로드맵] FrontEnd - JavaScript #1
  • [로드맵] FrontEnd - CSS #3
  • [로드맵] FrontEnd - CSS #2
KimBY
KimBY
웹개발과 관련된 개발지식 모음
B.Y Kim의 개발노트웹개발과 관련된 개발지식 모음
KimBY
B.Y Kim의 개발노트
KimBY
전체
오늘
어제
  • 분류 전체보기 (99)
    • 사소한 개발지식 (49)
      • PHP (2)
      • JavaScript (15)
      • NodeJS (0)
      • JAVA (2)
      • 잡?지식 (4)
      • 로드맵(FE) (22)
      • React (4)
    • 개발노트 (6)
      • 포트폴리오사이트 (6)
    • 프로그래머스 (33)
      • Level1(JS) (0)
      • Level2(JS) (33)
    • 백준알고리즘 (11)
      • 단계별로 풀어보기3(for문) (11)
    • 잡담 (0)

인기 글

최근 글

최근 댓글

태그

  • Level2
  • CSS
  • 단계별로풀어보기
  • 프로그래머스
  • 로드맵
  • FE로드맵
  • 백준알고리즘
  • react
  • javascript
  • frontend
hELLO · Designed By 정상우.
KimBY
[로드맵] FrontEnd - CSS #4
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.