본문 바로가기
728x90
300x250
SMALL

css 애니메이션5

다양한 의사 클래스(:focus, :active, :checked) css 의사 클래스css 의사 클래스는 사용자의 인터랙션 상태에 따라 스타일을 다르게 지정할 수 있다. 주요 의사 클래스 설명:focus : 키보드 또는 마우스 포커스를 받은 상태(주로 인풋 요소에 적용):active : 사용자가 클릭한 순간(마우스 버튼을 누르고 있는 상태):checked : 체크박스나 라디오 버튼이 선택된 상태 예제1 : 인풋 포커스 시 테두리 강조 "> 예제 2 : 버튼 클릭 시 색상 변화 (:active) 눌러보세요 눌러보세요">눌러보세요 예제3 : 체크박스 선택 시 배경 변화(:checked) 선택해보세요 선택해보세요"> 선택해보세요 2025. 5. 18.
animation @keyframes 으로 반복되는 움직임 만들기 animation효과css @keyframes와 animation 속성을 사용하면 반복되거나 시간 기반으로 동작하는 애니메이션을 만들 수 있다.transition은 상태 변화에 반응하지만, animation은 자동 반복도 가능하다.주요 속성@keyframes : 애니메이션의 단계 정의animation-name : 사용할 키프레임 이름animation-duration : 애니메이션 시간animation-iteration-count : 반복 횟수animation-delay : 시작 지연animation-fill-mode : 종료 후 상태 유지 주요 문법@keyframes animationName { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; }}.element {.. 2025. 5. 15.
transition으로 부드러운 애니메이션 만들기 개념설명css transition 속성은 스타일이 변화할 때 그 변화를 부드럽게 애니메이션 효과로 보여주기 위해 사용된다. 예를 들어 마우스를 올렸을 때 색상이 바뀌거나 요소가 확대되는 경우, transtion을 통해 자연스럽게 변화하게 만들 수 있다. 주요 속성 설명transtion-property : 어떤 속성에 전환 효과를 줄 것인지 지정(예 : background-color, transform 등)transition-duration: 전환이 완료되기까지 걸리는 시간(예: 0.3s)transtion-timing-function:전환 속도의 곡선을 지정(예:ease, linear, ease-in-out 등)transition-delay: 전환이 시작되기까지 대기 시간예제 1 : 버튼 색상이 부드럽게 .. 2025. 5. 12.
강력한 애니메이션 GSAP, 사용법과 예제 정리 GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리로, HTML, CSS, SVG, Canvas, WebGL등의 요소를 부드럽고 효율적으로 애니메이션할 수 있도록 도와준다.  GSAP의 주요 특징1. 강력한 성능 : 일반적인 CSS 애니메이션보다 빠르고 부드럽게 작동한다.2. 다양한 애니메이션 가능 : 위치, 크기, 투명도, 색상, 회전 등 다양한 속성 애니메이션 지원3. 체이닝(Chaining)과 타임라인(Timeline) 지원 : 여러 애니메이션을 순차적으로 또는 동시에 실행 가능4. 반응형 지원 : 반응형 웹에서도 문제없이 동작5. 스크롤 애니메이션 연동 가능 : scrollTrigger 플러그인으로 스크롤 기반 애니메이션 구현 가능 1... 2025. 3. 11.
728x90
반응형
LIST

티스토리툴바