요청 처리 중입니다...

[css 12.] js 없이 animation(애니메이션) 적용방법, 속성, @keyframe 설정

2024-07-09 22:36:42

css animation "transition"은 요소의 속성 변화에 부드러운 효과라면, "animation"은 요소의 복잡한 동작과 효과를 세밀하게 조절하고 반복이나 상태를 바꿀 수 있다. css animaition 적용 방법 1. 내가 애니메이션 적용할 css 요소 .css요소 { animation: 애니메이션이름 2s; } 속성 animation-name : 이름 지정 (내가 이름 짓기 - 키프레임에 연결하는 부분) animation-duration : 지속시간 (1s, 2s, ...) animation-timing-function : 속도 지정(ease, ease-in, ease-out, ease-in-out, linear) animation-delay : 실행 지연시간 (0.5s, 1s, ...) animation-iteration-count : 실행 횟수 (숫자, 무한반복은 infinite) animation-direction : 진행방향 지정 (normal, reve...

# cssanimation # cssanimation멈추기 # cssanimation무한반복 # cssanimation옵션 # cssanimation적용 # csskeyframes설정 # csskeyframe설정 # css애니메이션 # css애니메이션효과

원문 링크 : [css 12.] js 없이 animation(애니메이션) 적용방법, 속성, @keyframe 설정

등록된 다른 글

[GTQ 포토샵 1급] 100점으로 합격한 후기 (시험 치기 10분전에 읽고 합격하자!!!)

[라이브러리] swiper.js 슬라이드 사용법, 커스텀, 적용실패이유, 옵션 정리, 반응형

[ITQ] 아이티큐 한글 핵심정리 + 단축키

[javascript 5.] 자바스크립트 자료형 변환

[css 3.] 다양한 단위 설정하기 - px, %, em, rem, vw, vh

[html 7.] html에 form 작성하기 (input, select, form 관련 속성 설정)