한 눈에 끝내는 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
      정리
    시작하기 전에
    02 CSS Animation1. transition
    시작하기 전에
    default

    CSS 애니메이션의 첫 번째 주인공은 transition입니다. transition이란 CSS 속성 값이 변할 때 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 뜻합니다. 이와 관련된 다양한 속성들은 차근차근 살펴보며 가벼운 예제를 통해 transition이 무엇인지 경험해 봅시다.

    질문하기