delay - 한 눈에 끝내는 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
      정리
    delay
    learn
    Practice
    learn
    02 CSS Animation1. transition
    delay

    현재 실습 환경의 '실행' 버튼을 클릭하면 가로, 세로 100px 길이를 가지며, 빨간 배경색을 가진 <div>가 등장합니다. <div>에 마우스 커서를 올리면 가로, 세로 300px 길이를 가진 파란 배경색의 <div>로 변하는 걸 확인할 수 있습니다. 

    default

    주어진 코드에 아래와 같이 코드를 한 줄 추가해주세요. 지금은 이 코드의 의미를 모르셔도 괜찮습니다.

    css

    처음에는 배경색과 크기가 마우스 커서를 대자마자 바뀌었지만, 코드를 추가하니 마치 애니매이션처럼 천천히 바뀌는 걸 확인할 수 있습니다. 이것이 바로 transition의 마법입니다! 지금부터 transition에 대해 함께 더 알아보겠습니다.

    default

    transition-delay


    첫 번째로 살펴 볼 transition과 관련된 프로퍼티는 transition-delay입니다.

    transition-delay에서 delay는 '지연'을 뜻합니다. transition이 발생할 때 얼만큼 기다렸다가 실행할지 결정해주는 속성이죠. 그렇다면 당연히 프로퍼티 값으로 시간이 필요하겠죠? 초 단위인 s나 밀리 초 단위인 ms로 나타냅니다. 만약 프로퍼티 값을 지정해주지 않으면 자동으로 0s가 입력되어 바로 transition이 발생합니다.

    프로퍼티 값은 양수 값만 가능할까요? 아닙니다. 프로퍼티 값은 놀랍게도 음수 값 지정이 가능합니다. 음수 값으로 지정하면 지연 없이 바로 transition이 실행되지만, 지정한 음수 값의 절대값 시간만큼 건너뛰고 시작합니다. 음수 값에 대한 예제는 다음 강의인 duration과 함께 보겠습니다.

    아래는 마우스를 올렸을 때 배경을 바꿔주는 예제 코드입니다. 세 개의 <div>에 대해서 transition-delay 값을 다르게 지정했습니다. 차이를 직접 확인해 봅시다.

    html
    css

    각각 마우스를 올려두고 0초, 1초, 2초 이후에 변화하는 것을 확인 할 수 있습니다.

    default
    Practice

    transition 강의의 코드를 따라가며 직접 작성해봅시다. 직접 작성하고 값을 바꾸며 복습해야 여러분 것이 됩니다.

    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)