목록Keyframe (1)

nika-blog

CSS 애니메이션

이번 포스팅에서는 CSS 애니메이션을 공부하면서, keyframe 사용 법 및 다양한 애니메이션 속성에 대해 공부하겠습니다. CSS 애니메이션이란? 여러 개의 CSS 스타일을 부드럽게 전환해준다. @keyframes 키워드 활용 시 시간 순서대로 정밀하게 짜여진 애니메이션 만들기 가능 @keyFrames 활용 1. CSS로 키프레임 블록 만들기 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% ..
FE/CSS 2022. 2. 24. 09:55
이전 Prev 1 Next 다음