[CSS] 트랜지션과 애니메이션

목차

• 트랜지션 속성
  • transition-property : 트랜지션의 적용 대상 지정 (기본값 all)
  • transition-duration : 트랜지션의 실행 시간 지정 (초 단위, 기본값 0)
  • transition-timing-function : 트랜지션의 실행 형태 지정
  • transition-delay : 트랜지션의 지연 시간 지정 (초 단위, 기본값 0)
  • transition : 위의 네 가지 속성을 한꺼번에 지정
• 애니메이션 속성
  • @keyframes : 애니메이션이 바뀌는 지점 설정
  • animation-delay : 애니메이션의 시작 시간 지정
  • animation-direction : 애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정
  • animation-duration : 애니메이션의 실행 시간 지정
  • animation-iteration-count : 애니메이션의 반복 횟수 지정
  • animation-name : @keyframes로 설정해 놓은 중간 상태 지정
  • animation-timing-function : 키프레임의 전환 형태를 지정
  • animation : 애니메이션 속성을 한꺼번에 묶어서 지정

트랜지션 속성

트랜지션(transition) : 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것

• transition-property : 트랜지션의 적용 대상 지정 (기본값 all)

  transition-property: all | none | 속성명;

  • all(기본값) : 요소의 모든 속성이 트랜지션 대상
  • none : 트랜지션 동안 아무 속성도 바뀌지 않음
  • 속성명 : 트랜지션 효과를 적용할 속성 지정
    (속성이 여럿일 경우 콤마(,)로 구분하여 나열)
    • ex. 배경색만 바꾸려면 transition-property: background-color

• transition-duration : 트랜지션의 실행 시간 지정(초 단위, 기본값 0)

  transition-duration: 시간;

  • 시간 단위는 초 또는 밀리초
  • 트랜지션 대상 속성이 여러개이면, 진행 시간도 콤마(,)로 구분해서 여러 개 지정 가능
  • 음수값으로 지정하면 0으로 간주

• transition-timing-function : 트랜지션의 실행 형태 지정

  transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

  • linear : 시작부터 끝까지 동일한 속도로 진행
  • ease(기본값) : 처음에는 천천히 시작, 점점 빨라지다가 마지막엔 천천히 끝냄
  • ease-in : 느리게 시작
  • ease-out : 느리게 끝남
  • ease-in-out : 느리게 시작하고 느리게 끝남
  • cubic-bezier(n,n,n,n) : 베지에 함수를 저의해서 사용
    (n값은 0~1 사이만 사용 가능)

• transition-delay : 트랜지션 효과를 언제부터 시작할 것인지에 대한 트랜지션의 지연 시간 지정 (초 단위, 기본값 0)

  transition-delay: 시간;

  • 사용할 수 있는 단위는 초단위, 밀리초단위
  • 지정한 시간만큼 기다렸다가 트랜지션이 시작

• transition : 위의 네 가지 속성을 한꺼번에 지정

  transition: transition-property값 | transition-duration값 | transition-timing-function값 | transition-delay값;

  • 트랜지션 적용 대상이 전체이고, 각각의 진행 시간이 같다면 한꺼번에 지정하는 것이 편리
  • 속성값 작성 순서는 상관없지만, 시간값을 사용하는 속성이 2개 있다면 앞에 오는 시간값을 transition-duration값으로, 뒤에 오는 시간값을 transition-delay값으로 간주

  // 예시
  transition: 2s ease-in;
  
  // 위의 것을 풀어 쓰면,
  trasition-property: all; //기본값
  trasition-duration: 2s;
  trasition-timing-function: ease-in;
  trasition-delay: 0; //기본값

예시

<style>
  .circle{
    width: 300px;
    height: 300px;
    background-color: blueviolet;
    transition-timing-function: ease-out; /* 마지막에 천천히 */
    transition-property: border-radius, background-color; /* 트랜지션 대상은 모서리와 배경색 */
    transition-duration: 3s; /* 3초동안 진행 */
  }
  .circle:hover{
    border-radius: 50%;
    background-color: cyan;
  }
</style>
...
<div class="circle"></div>

• 300x300 인 정사각형
  
• 위에 마우스 포인터를 올리면, 둥글게 변하면서 색상이 변함
  

애니메이션 속성

• @keyframes : 애니메이션이 바뀌는 지점 설정

  @keyframes 키프레임명 {
      from { 속성: 속성값; } /* 시작 지점 */
      to { 속성: 속성값; } /* 끝 지점 */
  }

  • 키프레임에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킴
  • 애니메이션의 중간 지점을 추가하려면, 시작위치를 0%, 끝 위치를 100%, 중간 지점을 50%로 추가
  • 시작과 끝 위치만 사용하려면, from과 to 키워드를 사용하거나, 0%와 100%를 사용
• animation-name : @keyframes로 설정해 놓은 중간 상태 지정

  animation-name: 키프레임명 | none;

  • 어떤 애니메이션을 사용할 지 이름으루 구분
• animation-delay : 애니메이션의 시작 시간 지정 (기본값 0)

  animation-delay: 시간;

  • 초(s), 밀리초(ms) 시간 단위 사용
• animation-direction : 애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정

  animation-direction: normal | reverse | alternate | alternate-reverse;

  • 키프레임에서 정의한 순서(0% ➔ 100% 또는 from ➔ to)로 진행하는데, 해당 속성을 사용해서 진행 방향을 바꿀 수 있음
  • normal(기본값) : from ➔ to 진행
  • reverse : to ➔ from 인 반대 방향으로 진행
  • alternate : 홀수 번째는 normal로, 짝수 번째는 reverse로 진행
  • alternate-reverse : 홀수 번째는 reverse로, 짝수 번째는 normal로 진행
• animation-duration : 애니메이션의 실행 시간(얼마동안 재생할 것인지) 지정 (기본값 0)

  animation-duration: 시간;

  • 초(s), 밀리초(ms) 시간 단위 사용
  • 기본값은 0 이므로, 지정하지 않으면 실행되지 않음
• animation-iteration-count : 애니메이션의 반복 횟수 지정

  animation-iteration-count: 숫자 | infinite;

  • 숫자 : 애니메이션의 반복 횟수 지정
  • infinite : 애니메이션을 무한 반복
• animation-timing-function : 키프레임의 전환 형태(애니메이션의 속도 곡선)를 지정

  animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

  • 트랜지션과 마찬가지로 애니메이션의 시작, 중간, 끝에서 속도 지정하여 전체 속도 곡선 만들 . 수있음
• animation : 애니메이션 속성을 한꺼번에 묶어서 지정

  animation: animation-name값 | animation-duration값 | animation-timing-function값 | animation-delay값 | animation-iteration-count값 | animation-direction값;

  • animation-duration값은 반드시 지정해야 애니메이션 효과가 나타남

  animation: 키프레임명1 1.5s infinite, 키프레임명2 1.5s infinite alternate;
  /* 해당 요소에 키프레임명1인 애니메이션은 1.5초 진행이 무한 반복이고,
  키프레임명2인 애니메이션은 1.5초동안 진행이 무한반복이면서 홀수번째는 원래진행방향으로 짝수번째는 반대진행방향으로 효과를 준다.*/

예시

<style>
  body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ball{
    width: 100px;
    height: 100px;
    background-color: brown;
    border-radius: 50%;
    position: relative;

    animation-name: bounce; /* 애니메이션 이름 지정 */
    animation-duration: 2s; /* 애니메이션 지속시간 지정 */
    animation-iteration-count: 5; /* 총 5번 진행 */
  }
  @keyframes bounce {
    from {top:0;}
    50% {top:100px;
        height: 80px;
        background-color: tomato;}
    to {top:0;}
  }
</style>
...
<div class="ball"></div>

• 공을 드리블하는 것과 같은 애니메이션 구현 가능