-
CSS - 애니메이션기본 2022. 2. 15. 18:01반응형
애니메이션
- transition
-
transition-duration : 애니메이션 효과 시간 설정
-
transition-property : 애니메이션 효과를 적용할 프로퍼티
- transition-timing-function : 트랜지션 진행별 속도 설정
- transition-delay : 트랜지션 시작 시간 지연
-
transition
시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미
transition-duration
- 트랜지션 진행 시간 지정
.box { width : 100px; height : 100px; background: red; border : 1px solid black; } .duration { /* 트랜지션이 진행되는 시간을 지정하는 속성 (s or ms)*/ transition-duration: 5s; } .duration:hover { background: yellow; }
<div class="box duration"></div>
13_애니메이션 트랜지션 진행 시간 지정하기
마우스를 올리면 트랜지션이 5초동안 진행되는 것을 볼 수 있다.
transition-property
- 애니메이션 효과를 적용할 프로퍼티 목록을 정의
.box { width : 100px; height : 100px; background: red; border : 1px solid black; } .property { /* 트랜지션을 적용할 속성을 선택하며 여러 개를 선택한 경우 , 로 구분하여 나열함 */ transition-property: background-color, transform, width, height; /* 트랜지션이 진행되는 시간을 지정하는 속성 여러 개를 설정할 경우 , 로 구분하고 property 값과 1:1 대응 */ transition-duration: 2s, 3s, 1s, 10s; } .property:hover { width : 200px; height : 200px; background: yellow; transform: rotate(180deg); }
<div class="box property"></div>
13_애니메이션 트랜지션 진행별 시간 설정하기
transition-timing-function
- 트랜지션 진행별 속도 설정
- 변화 속도 : linear, ease, ease-in, ease-out, ease-in-out
.box { width : 100px; height : 100px; background: red; border : 1px solid black; } .timing { transition-duration: 10s; } input:checked ~ .timing { background: yellow; width : 100%; } .timing:nth-of-type(1) { transition-timing-function: linear; }
<label>시작 : </label> <input type="checkbox"> <p>linear</p> <div class="box timing"></div>
13_애니메이션 트랜지션 진행별 속도 지정하기
transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
베지어 곡선 : 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로, CSS 애니메이션 등에서 도형을 그릴 때 사용
* 참고 : https://cubic-bezier.comlinear
transition-delay
- 트랜지션 시작 시간 지연
.delay { transition-duration: 3s; transition-property: all; transition-timing-function: ease-in; transition-delay: 2s; } .delay:hover { transform: rotate(180deg); background : yellow; }
<h3>트랜지션 시간 지연하기</h3> <div class="box delay"></div>
13_애니메이션 트랜지션 시간 지연하기
마우스를 빨간 박스에 올리면 2초뒤에 트랜지션 실행
transform
사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것을 변형이라 하고 transform 속성에 변형 함수를 사용해서 나타낼 수 있다.
- translate(x,y) : 지정한 크기만큼 x축 y축으로 이동
- scale(x,y) : 지정한 크기만큼 x축 y축으로 확대/축소
- rorate(각도) : 지정한 각도만큼 회전
- skew(x,y) : 지정한 각도만큼 x축과 y축으로 요소 변형
keyframes
- @keyframes을 사용하면 간단한 애니메이션 여러 개를 한꺼번에 실행할 수 있음
- 애니메이션 이름과 CSS 속성을 시점을 나누어 설정 ( from { } to { } or 0% { } 50% { } 100% { } 등)
- animation-name : 애니메이션 이름
- animation-duration : 애니메이션 실행 시간
- animation-direction : 애니메이션 반복 방향 (처음부터, 끝나면 다시 역순으로)
- animation-iteration-count : 반복 횟수 (숫자 또는 무한)
시작 지점과 끝 지점 두 개만 있는 경우
.box { width : 100px; height : 100px; background: red; border : 1px solid black; } @keyframes jump { from { margin-left: 300px; } to { margin-left : 100px; margin-bottom : 200px; } } /* 애니메이션 jump를 #jump <div>에 적용 */ #jump { /* keyframes에서 정한 이름을 작성 */ animation-name: jump; /* 애니메이션의 실행 시간을 지정하는 속성 */ animation-duration: 2s; /* 애니메이션을 얼만큼 반복할지 설정 */ animation-iteration-count: 5; /* 애니메이션 반복 시 처음부터 시작 or 끝에서 역순으로 */ animation-direction: normal; }
<div class="box pika" id="jump" ></div>
13_애니메이션 jump 애니메이션
애니메이션 반복이 10번이므로 새로고침해서 보세요
중간 작업이 있는 경우
.box { width : 100px; height : 100px; background: red; border : 1px solid black; } @keyframes shake { 0% { border : 5px solid black; } 50% { margin-left : 300px; border : 10px solid black; border-radius: 50%; transform: translate(50px, 50px); } 100% { margin-left : 600px; border : 5px solid black; transform : rotate(45deg); } } /* 애니메이션 shake를 #shake img에 적용 */ #shake { /* alternate : 반복 시 역순으로 infinite : 무한 반복 */ animation: shake 2s alternate infinite; }
<div class="box" id="shake"></div>
13_애니메이션 중간 작업이 있는 애니메이션
반응형'기본' 카테고리의 다른 글
CSS - 레이아웃 스타일(Grid) (0) 2022.02.15 CSS - 레이아웃 스타일(Flexbox) (0) 2022.02.15 CSS - 레이아웃 스타일 (0) 2022.02.15 CSS - 테두리 스타일 (0) 2022.02.15 CSS - 색상 배경 스타일 (0) 2022.02.15 - transition