CSS 키프레임 애니메이션 9종 — 한 줄 복붙으로
CSS 키프레임 애니메이션은 @keyframes로 만든 움직임을 클래스 하나에 담아 어떤 요소에든 그대로 붙여 쓰는 방식입니다. 뜨기·튀기·돌기·펄스·흔들기·비틀기·깜빡임·심장박동·젤리, 아홉 가지를 한 번에 모았고
읽기자동 재생
동작
CSS 글자 그라데이션 반짝이는 텍스트 9종 — 한 줄 복붙으로
css 글자 그라데이션은 글씨 위에 여러 색을 흘려 넣어 단색 글자보다 시선을 오래 붙잡는 효과입니다. 아홉 개 중 하나(03)는 같은 글자를 뒤에 한 겹 더 깔아 후광만 blur 로 만드는데, 부모에 isolati
CSS 순차적 애니메이션 9종 — 복붙되는 스태거 데모
CSS 순차적 애니메이션은 목록이나 격자의 여러 항목이 한꺼번에 움직이지 않고, 정해진 순서에 맞춰 지연 시간을 조금씩 다르게 주어 하나씩 나타나거나 사라지게 만드는 기법입니다. 아홉 개 중 하나(08)는 반복문도
CSS 배경 애니메이션 9종 — 한 줄 복붙으로
CSS 배경 애니메이션은 히어로 섹션이나 카드 뒤에서 이미지 파일 없이 그라데이션·격자·점·노이즈 같은 패턴을 계속 움직이게 만드는 기법입니다. 아홉 개를 모았는데, 그중 하나는 커서를 따라가는 스포트라이트라 마우스
CSS 스크롤 애니메이션 9종 — AOS·GSAP 없이 JS 0줄로
CSS 스크롤 애니메이션 아홉 개를 모았습니다. AOS·GSAP 없이 브라우저 내장 animation-timeline 하나로 스크롤 위치 자체를 애니메이션 시계로 씁니다. JS는 0줄이고, 격자에서는 아홉 개 효과가