duration - 한 눈에 끝내는 CSS/JS 애니메이션
한 눈에 끝내는 CSS/JS 애니메이션
    • 01
      시작하기에 앞서
    • 강의의 방향
      실습 환경 설정 - 구름IDE
    • 02
      CSS Animation1. transition
    • 시작하기 전에
      delay
      duration
      property
      timing-function
      transition
      정리
    • 03
      CSS Animation2. transform
    • 시작하기 전에
      scale
      rotate, translate
      skew, origin
      정리
    • 04
      CSS Animation3. keyframe 개념과 활용
    • 시작하기 전에
      Keyframe의 시작
      animation과 관련된 프로퍼티_1
      animation과 관련된 프로퍼티_2
      animation과 관련된 프로퍼티_3
      Loading Spinner 만들기
      Loading Bar 만들기
      정리
    • 05
      JS Animation1. DOM
    • 시작하기 전에
      DOM이 무엇이길래?
      DOM 접근 1
      DOM 접근 2
      DOM 조작하기 1: 요소 스타일
      DOM 조작하기 2: 요소 스타일 수정
      정리
    • 06
      JS Animation2. Event
    • 시작하기 전에
      이벤트(Event)
      이벤트 핸들러(Event Handler)
      this와 Event 객체_1
      this와 Event 객체_2
      Prevent Default
      정리
    • 07
      JS Animation3. Animation
    • 시작하기 전에
      Web Animations
      classList
      Transition Event_1
      Transition Event 2
      Animation Event
      Timer Function
      정리
    duration
    learn
    Practice
    learn
    02 CSS Animation1. transition
    duration

    다음 프로퍼티는 transition-duration입니다.

    duration은 '지속'이라는 뜻을 가진 프로퍼티로, transition이 발생하는 지속 시간을 지정할 수 있습니다. delay만 사용하면 프로퍼티 값만큼 시간이 지난 뒤 CSS 속성 값이 갑자기 확 변했기에 애니메이션 느낌이 덜했지만, transition-duration을 지정하면 좀 더 애니매이션 같은 효과를 표현할 수 있습니다.

    duration 또한 얼만큼의 시간 동안 변할지 지정해 주어야 합니다. 때문에 delay와 같이 시간을 속성 값으로 가지며, 초 단위를 나타내는 s 나 밀리 초를 나타내는 ms로 나타냅니다. duration 역시 프로퍼티 값을 지정해주지 않으면 자동으로 0s가 입력되어 transition의 효과가 나타나지 않습니다.

    이전 강의의 예시에서 .frirst, .second, .third를 아래와 같이 바꿔 줍니다.

    css

    각각 0초, 1초, 2초 동안 변화가 발생하는 것을 확인할 수 있습니다.

    default

    transition-duration은 transition-delay와 함께 실습해보기 좋습니다. 실습을 직접 진행하며 차이를 살펴봅시다.

    Practice

    *'초기화'를 클릭하면 실습을 위한 코드를 볼 수 있으니, 실습을 풀이하기 전에 꼭 이론 내용에 있는 코드를 직접 따라 작성하며 학습을 진행하시기 바랍니다.

    주어진 코드를 실행하면 왼쪽부터 각각 2초, delay 2초, delay -2초라고 적혀진 빨간색 상자 3개가 배치된 것을 볼 수 있습니다.

    1. box first에 duration을 2초, delay를 0초로 지정합니다.
    2. box second에 duration을 10초, delay를 2초로 지정합니다.
    3. box third에 duration을 10초, delay를 -2초로 지정합니다.

    위 3개 작업을 진행한 뒤 '실행' 버튼을 클릭해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)