🍒 Chae-ri Dev 🍒

  • 홈
  • 태그
  • 방명록

animationbar 1

[React/CSS] 옆으로 흐르는 텍스트 Animation Bar 만들기

예시 위처럼 이번에 참여한 프로젝트에서 만든 애니메이션바에 대해 포스팅을 해보겠습니다. 애니메이션바는 keyframe을 이용해서 만듭니다! 여기서 keyframe이란? CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 하는 속성 0~100% 형태 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } from-to 형태 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } keyframe을 사용하기 위해서는 다음과 같이 3가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름 stage : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)..

Css 2022.10.23
이전
1
다음
더보기
프로필사진

🍒 Chae-ri Dev 🍒

채리의 개발 블로그 ٩( *˙0˙*)۶

250x250
반응형
  • 분류 전체보기 (89)
    • Frontend (4)
      • Package Manager (1)
      • ESLint (1)
      • Prettier (1)
      • 웹 서버 (1)
    • CS (9)
      • 운영체제 (7)
      • 네트워크 (2)
      • 데이터베이스 (0)
    • React (7)
    • NextJS (1)
    • JavaScript (6)
    • Css (1)
    • GSAP (1)
    • Python (3)
    • Algorithm (17)
      • Programmers (7)
      • BackJoon (1)
      • 알고리즘 정리 (9)
    • Cloud (1)
      • Docker (1)
    • OPIc (25)
      • 오픽노잼(IM) (16)
      • 오픽노잼(IH) (9)
    • file (2)
    • 프로젝트 (2)
    • 우리FIS아카데미 (6)
    • Git (2)
    • Etc (2)

Tag

우리에프아이에스, OPIC, OS, Python, Github, react, 파이썬, 리액트, 프로그래머스, 글로벌소프트웨어캠퍼스, 오픽, k-디지털트레이닝, 우리FIS아카데미, 운영체제, 클라우드서비스개발, javascript, 오픽노잼, 우리FISA, algorithm, 알고리즘,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바