수니리즘

    Animation 1

    [CSS3] animation : 미리 지정해둔 설정 값에 따라 자동으로 실행되는 모션 만들기

    이전 게시글에서 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다. 이번 게시글에서는 animation과 @keyframes라는 속성을 통해 사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 설정했던 모션을 호출하는 방식으로 동작합니다. 우선 다음의 기본 사용규칙을 살펴보겠습니다. animation의 경우는 @keyframes의 설정 등 다소 사용방식이 복잡해 보일 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 anim..

    💕IT 공부하기/CSS3 2023.05.03
    이전
    1
    다음
    더보기

    공지사항

    • 2023년 정기 기사 제2회 필기시험 원서접수 관련 주요 안내사항
    • 분류 전체보기 (150)
      • 💜Health and Wellness💜 (18)
      • 💕IT 공부하기 (40)
        • 데이터베이스 (27)
        • CSS3 (13)
      • 💕자격증 정보 (51)
        • 기능사 (19)
        • 산업기사 (22)
        • 기능장 (4)
        • 관세사 (4)
        • 공인중개사 (1)
      • 💕꿈풀이 해몽읽기 (31)
      • 카페💕디저트 (9)
      • 💕동네맛집추천 (1)
      • 💕K디지털기초역량훈련 (0)
        • 웹퍼블리싱 (0)
        • UX·UI (0)
    반응형

    Copyright © Kakao Corp. All rights reserved.

    티스토리툴바