그냥, 일단 써내려가자

  • 홈
  • 태그
  • 방명록

동적인 웹 1

[HTML/CSS]Animation에서 step기능 알아보기

안녕하세요 무택입니다 :) 오늘은 animation 옵션 중에서 steps에 대한 설명을 해보려고 합니다. HTML/CSS 코드 step non-step 한 글 자 씩 보 여 주 기 Codepen See the Pen [CSS}animation step 사용 by TytanLee (@TytanLee) on CodePen. 개념 설명 오늘 사용한 `steps` 옵션은 프레임을 설정해 주는 기능입니다. 애니메이션 옵션에서 기본 설정은 자연스럽게 움직이는 것이지만 `steps`옵션을 넣어주면 몇 단계를 통해서 애니메이션을 보여줄 것인지 설정할 수 있습니다. 왜 사용하는지 시곗바늘이 딱딱 움직이는 연출을 할 수도 있고, 위 예시처럼 텍스트를 한 글자씩 노출시키는 연출을 할 수도 있고 다양한 연출을 할 수 있기 ..

🧑‍💻개발/HTML·CSS 2023.09.13
이전
1
다음
더보기
프로필사진

일상생활의 생각들, 공부하는 것들, 취미생활. 평범한 일상을 기록해 갑니다.

공지사항

  • 20만 조회수 기념 이벤트
  • 분류 전체보기 (265) N
    • 📕스토리 (4)
    • 🍖냠 (6)
      • 제품 리뷰 (2)
      • 식당 리뷰 (4)
    • 🔎제품 (2)
    • 🧑‍💻개발 (95)
      • HTML·CSS (23)
      • JS (15)
      • jQuery (7)
      • 라이브러리 (12)
      • 개발자도구 (5)
      • 아카이브 (27)
      • 코딩애플 (4)
    • 🎨디자인 (77) N
      • 포토샵 (44) N
      • 포토샵 SOS (12)
      • 일러스트 (3)
      • 디자인 (15)
    • 💙취미 (13)
      • 블렌더 (2)
      • ISTJ의 감상평 (2)
    • 🏷️생활 팁 (31)
    • ✏️티스토리 (12)
    • ✈️여행 (5)
    • 💡생성 AI (8)
    • 🪄심리테스트 (2)
    • 오류 해결노트 (9)

최근글과 인기글

  • 최근글
  • 인기글
맨 위로
300x250

Copyright © Kakao Corp. All rights reserved.

0

티스토리툴바