animation

TIL/2023

0808-TIL-Progress bar 만들기(tailwind animation)

Progress bar 만들기 완성 이미지 tailwind animaton 추가하기 사용자 지정 animation을 추가하려면, tailwind.config 파일을 수정해야한다. extend: { keyframes: { progress: { '0%': { width: '0%' }, '100%': { width: '100%' } } }, animation: { progress3: 'progress 3s ease-in', progress5: 'progress 5s ease-in', progress7: 'progress 7s ease-in' } } 원하는 이름으로 keyframe을 추가한다. (progress bar를 만들 것이라서 progress로 만들었다!) 0%, 100% 만 설정하는 경우에는 from ..

숨숨123
'animation' 태그의 글 목록