css
CSS 키프레임을 활용한 로딩 애니메이션
- -
페이지가 로딩되거나 할때 쓸 수 있는 도형 로딩 애니메이션
@keyframes loading --> 'loading' 이라는 이름의 키프레임 애니메이션 생성
> 0%, 50% ,100%로 애니메이션 구현
> 키프레임을 적용할 부분에 animation : loading(애니메이션이름) 1s(1초동안) linear(속도함수/일정한속도로) infinite(무한반복)
> 세가지 원이 속도가 다르게 하는 것은 각각의 span에 animation-delay 적용
구현화면
'css' 카테고리의 다른 글
| IR(Image Replacement)기법 (0) | 2024.01.30 |
|---|---|
| input checkbox, radio 이미지 변경 (1) | 2023.10.04 |
| CSS - hover를 이용한 기본형 드롭다운 메뉴 (0) | 2022.05.13 |
| 가로 배치하기(float, overflow, clear, inline-block) (0) | 2022.05.10 |
Contents
소중한 공감 감사합니다