조금 더 웹 사이트 활기차고 매끄럽게 만들고 싶습니까? JavaScript를 사용할 필요가 없더라도 CSS만으로는 대화식 애니메이션을 구현할 수 있습니다. 이 기사에서 초보자조차도 쉽게 따라갈 수있는 CSS 애니메이션 기초 및 예제를 소개합니다.
CSS 애니메이션이란 무엇입니까?
CSS 속성에 의해서만 요소에서 움직임이나 효과를주는 기술 렌더링 비용은 낮으며 브라우저는 잘 최적화되어 부드러운 효과를 제공합니다 | 현대 | 설명 | | —— | —— | | 이행 | 상태를 변경할 때 애니메이션 애플리케이션 | @keyframes | 애니메이션 시퀀스의 직접적인 정의
1. 전환을 사용한 간단한 애니메이션
“CSS 버튼 {배경 : #4caf50; 색상 : 흰색 딩 : 12px 24px; 테두리 : 없음; 전환 : 배경 0.3s 편의;} 버튼 : 호버 {배경 : #45a049} 부드럽게 전환을 변경합니다 마우스 오버 및 초점과 같은 사건에 대한 응답
2. 키 프레임을 사용한 애니메이션
“css @keyframes slididown {from {transform : translatey (-100px); 광학 : 0;} to {translatey (0); 불투명도 : 1;} .Banner {.Banner {.Banner Animation : Slidedown 0.5S Ease-outs 위에서 부드럽게 내리는 효과는 애니메이션이 끝난 후 상태를 유지합니다.
3. 애니메이션 및 순차적 효과
“CSS .Loader {Animation : Spin 2S Linear Infinite;} @Keyframes Spin {0% {transform : rotate (0DEG);} 100% {transform : rotate (360deg);}} “애니메이션 무한과 같은 반복적 인 효과에 대한로드 사용 번갈아 하는, 지연 다양한 설정을 설정할 수 있습니다
4. 변환 및 불투명도 응용 프로그램
“CSS .card {전환 : 변환 0.3S Ease, 옵션 0.3s;} .card : hover {transform : scale (1.05); 불투명도 : 0.9;} “ 약간 더 크고 반투명 한 시각적 피드백은 좋습니다.
5. 연습 예 : 버튼 클릭 애니메이션
“css @keyframes clickeffect {0% {transform : scale (1);} 50% {transform : scale (0.95);} 100% {transform : scale (1);} 버튼 : active {animation : clickeffect 0.2s ease 반응성 UI 구현
애니메이션 최적화 팁
변형, 불투명도 주로 속성 사용 (가속 GPU)이 변경됩니다 예비 렌더링은 속성과의 힌트입니다 UX 악화 및 접근성 문제 발생할 수 있습니다
추천 CSS 애니메이션 라이브러리
| 이름 | 기능 | | —— | —— | | 애니메이션 CSS | 다양한 키 프레임 컬렉션 (쉬운 사용) | hover.css | 마우스 오버 효과 전문가 | aos.js | 스크롤 -기반 애니메이션 (CSS Linkage)
마치다
CSS만으로는 세련되고 반응적인 애니메이션을 만들 수 있습니다. 오늘 소개 된 예제를 기반으로합니다 버튼, 배너 및 카드 UI와 같은 상호 작용을 향상시킵니다. 코드는 짧지 만 효과는 강력합니다! CSS와 함께 구현 된 버튼 → No. 19 : 웹 디자인 재단 : 색상, 글꼴, 레이아웃
참조
https://developer.mozilla.org/ko/docs/web/css/animation https://animate.style/