ygreenb
yellowgreenblue
ygreenb
전체 방문자
오늘
어제
  • TIL (130)
    • Algorithm & Data Structure (70)
      • 이론 (4)
      • 프로그래머스 (54)
      • 백준 (12)
    • JAVA (4)
    • Android Studio (9)
    • Database (1)
    • WEB (25)
      • HTML+CSS (7)
      • Javascript (5)
      • React (11)
      • Django (1)
      • Node.js (1)
    • Computer Vision (13)
    • Git (8)

블로그 메뉴

  • HOME
  • TAG
  • GITHUB

공지사항

인기 글

태그

  • React
  • BFS
  • reactjs
  • getOrDefault
  • 백준
  • 스택/큐
  • HashMap
  • PriorityQueue
  • stack
  • greedy
  • 해시
  • git
  • 프로그래머스 Lv.2
  • 코틀린
  • sort
  • Comparator
  • kotiln
  • dfs
  • entrySet
  • DP
  • java
  • Android
  • git bash
  • Arrays.sort()
  • Queue
  • 깃
  • 프로그래머스
  • compareTo()
  • 깃허브
  • 안드로이드

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
ygreenb

yellowgreenblue

WEB/HTML+CSS

[CSS] CSS 애니메이션 (Transform, Transition, Animation)

2022. 4. 11. 13:38

Transform, Transition, Animation은 전부 css3 의 언어에 등장하는 속성

1. Transform

transfrom은 특정 영역을 회전시키거나, 확대/축소 시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용

1.1 rotate, scale, skew, translate

.transition {
      transfrom: rotate(45deg); /* 회전 */
			transform: scale(2,3); /* 확대 축소 */
      transform: skew(10deg, 20deg); /* 각도 변경 */
			transform: translate(100px; 200px); /* 위치 변경 */
}
  • .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능
  • .scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대, 소수를 넣으면 축소
  • .skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂, 음수 입력 가능
  • .translate(x, y): 선택한 오브젝트의 좌표 변경, 음수 입력 가능

1.2 prefix 접두사

.transition {
      -webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
      -mox-transform: translate(100px, 200px); /* 파이어폭스 */
      -ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
      -o-transform: translate(100px, 200px); /* 오페라 */
}
  • Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능

2. Transition

transition은 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용

transition: [적용시키고 싶은 속성, 또는 all] [바뀌는 시간] [전환 효과의 시간동 속도] [지연 시간];

2.1 property, duration, timing-function, delay

.transition {
      transition-property: width;
      transition-duration: 2s;
}
  • .property : 효과를 적용하고자 하는 css 속성
  • .duration : 효과가 나타나는데 걸리는 시간
  • .timing-function : 효과의 속도, linear은 ‘일정하게’라는 의미
  • .delay : 특정 조건 하에서 효과 발동시키는 지연시간. 1s는 ‘1초 후’라는 의미

전환 효과의 시간당 속도 (Transition timing function)

  1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
  2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
  3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.
  4. ease-out : 전환(transition) 효과가 천천히 끝납니다.
  5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
  6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

2.2 가상 선택자 :hover

:hover는 요소에 마우스를 올렸을 때 반응하게 하는 css 요소

 .transition: hover { width: 300px; }
  • css에서 미리 만들어 놓은 클래스. ‘마우스를 올렸을 때’ 라는 조건
  • .transition:hover를 띄어쓰기 없이 작성해야 함

2.3 Transition 종합

.transition{
		transition: width 2s linear 1s;
}

.transition: hover { width: 300px; }
  • 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 일정한 속도로 변하는 애니메이션 효과 발동
  • 숫자가 하나인 경우 ⇒ 무조건 .duration
  • 숫자가 두개인 경우 ⇒ .duration → .delay 순서는 기억하자!
  • ❗ transition을 .transition 이 아니라 .transition:hover에 넣게 되면?
    => 마우스를 치우는, 즉 없어질 때에 transition 효과가 적용되지 않는다.

3. Animation

animation 은 특정 지점별로 애니메이션 효과를 적용할 때 사용, transition과 달리 조건에 상관 없이 어떤 이벤트를 적용함

.animation {
    animation-name: changeWidth; /* 애니메이션 이름 */
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

/* 속성들을 한 줄로 작성 */
.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
}

@keyframes changeWidth {  /* @keyframes 애니메이션 이름 */
    from { width: 300px; } /* 시작 */
    to {width: 600px; ] /* 끝 */
}
  • .animation : 애니메이션 조건을 적어줌.
    • .name : 개발자가 임의로 작성하는 애니메이션 이름
    • -delay : 애니메이션이 시작하기 전 딜레이할 시간을 설정하는 속성
    • -timing-function : 애니메이션 속도 곡선을 제어하는 속성
    • -duration : 애니메이션이 실행되는 시간을 설정하는 속성
    • .iteraion-count : 애니메이션 반복 횟수
    • .direction : 애니메이션 진행 방향
      • alternation: from → to → from ( 시작에서 끝으로 갔다가 다시 끝에서 시작으로 오는 반복효과 적용)
      • normal : from → to, from → to (시작을 기준으로 끝으로 가는 것)
      • reverse : to → from, to → from (끝을 기준으로 시작으로 돌아가는 것)
  • @keyframes : 애니메이션을 사용하려면 따라와야하는 일종의 명령어. 변화를 줄 실제 적용 값을 적어준다.
    • from, to : 시작과 끝 지점. 실제 애니메이션에 적용되는 결과값에 해당

4. 애니메이션 응용

4.1 Transform & Animation

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}
  • 애니메이션 코드를 한 줄로 작성시, 먼저 나오는 숫자가 .duration이고, 나중에 나오는 숫자가 .delay
  • 1000ms = 1s , 1500ms는 ‘1.5초’ infinition는 ‘무한 반복 효과’

4.2 prefix 작성시 유의사항

.box1 {
    -webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(-10deg); }
    to {-webkit-transform: rotate(10deg); }
}
  • prefix가 같은 애니메이션끼리 연동
저작자표시 (새창열림)

'WEB > HTML+CSS' 카테고리의 다른 글

[HTML+CSS] Media Query, Viewport  (0) 2022.04.11
[CSS] Layout 설정  (0) 2020.07.15
[CSS] CSS color, font style 적용  (0) 2020.07.15
[CSS] CSS 기본개념과 렌더링원리  (0) 2020.07.15
[CSS] HTML 웹 페이지에 style 주기  (0) 2020.07.11
    'WEB/HTML+CSS' 카테고리의 다른 글
    • [HTML+CSS] Media Query, Viewport
    • [CSS] Layout 설정
    • [CSS] CSS color, font style 적용
    • [CSS] CSS 기본개념과 렌더링원리
    ygreenb
    ygreenb
    개발공부기록장

    티스토리툴바