일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 첫코딩
- 비동기 테스트
- mock api 사용법
- React Testing Library
- nest.js 순환 참조
- 첫 코딩
- javascript 테스트
- react jest
- react 테스트
- 리액트 테스트
- nest.js 순환 종속성
- JavaScript
- TDD방식으로 리액트 테스팅
- react testing library 비동기 테스트 사용법
- 개발
- jest
- 프로젝트 배포하기
- TodoList 테스트 코드
- react native 무한스크롤
- HTML
- mock api를 이용한 react 테스트
- ScrollView 무한 스크롤
- React 테스트코드
- 리액트 테스트 코드
- react
- Testing-library/react
- CSS
- FlatList 무한 스크롤
- nest.js circular Dependency
- nest.js forwardRef
- Today
- Total
성장을 위한 기록
CSS 애니메이션 본문
제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.
animation(애니메이션)
애니메이션은 특정 지점에서 스타일을 바꾸는 방법이며 @keyframes 속성으로 정의하고 animation속성과 그 하위 속성으로 실행 시간이나 반복 여부 등을 결정한다.

@keyframes
기본형
@keyframes <이름> { <선택자> { <스타일>} }
이다. 여기서 선택자는 스타일 속성값이 바뀌는 지점을 가르키고 %단위를 사용하여 나타낸다. 시작과 끝을 나타낼 수 있는 0% 와 100%는 각각 from과 to를 대신 사용한다.
animation-delay
트렌지션과 마찬가지로 초(s)나 밀리초(ms) 값을 이용해 시작 시간을 늦출 수 있다.
animation-direction
기본형
animation-direction: normal | reverse | alternate | alternate-reverse
방향을 지정하는 속성이며 다양한 속성 값을 가질 수 있다.
- normal - from에서 to로 정방향으로 진행한다.(기본값)
- reverse - to에서 from으로 반대 방향으로 진행한다.
- alternate - 홀수 번째는 noraml , 짝수 번째는 reverse 값을 갖는다.
- alternate-reverse - 홀수 번째는 reverse, 짝수 번째는 normal 값을 갖는다.
animation-duration
기본형
animation-duration : <시간>
사용할 수 있는 단위는 초(s)와 밀리초(ms)가 있으며 기본값이 0으로 지정되어 있어 따로 속성값을 정하지 않는다면 애니메이션은 실행되지 않는다.
animation-iteration-count
기본형
animation-iteration-count: <숫자> | infinite
반복 횟수를 입력 할 수 있으며 infinite 속성 값을 통해 무한 반복할 수 있다.
animation-name
기본형
animation-name : <키프레임 이름> | none
앞서 언급한 @keyframes 속성에 <이름> 값을 입력하여 지정 요소에 어떤 애니메이션을 추가할 지 지정한다.
animation-timing-function
트랜지션과 동일하게 시작, 중간, 끝에 속도를 지정하여 속도 곡선을 만들 수 있다. 속성 값은 트랜지션과 동일하다.
animation
앞선 모든 속성을 animation 속성 하나에 표기할 수 있다. 또한 하나의 요소에 2개 이상에 애니메이션을 실행할 때 쉼표(,)를 통해 지정할 수 있다.
예시 소스
@keyframes change {
from {
border: 1px solid rgba(0,0,0,0.1);
}
to {
border: 1px solid #f00
border-radius: 50%;
}
.class {
background-color: #4cffoo ;
border: 1px solid rgba(0,0,0,0.1);
animation-name: change;
animation-duration: 3s;
animation-iteraction-count: infinite;
animation-direction: alternate;
소스에 애니메이션 속성을
animation: change 3s infinite alternate; 로 줄여 작성할 수 있다.
'FE (Front End) (구) > CSS' 카테고리의 다른 글
CSS 플렉스 / 그리드 레이아웃 (0) | 2022.01.31 |
---|---|
CSS 반응형 웹과 미디어 쿼리 (0) | 2022.01.31 |
CSS 트랜지션 (0) | 2022.01.28 |
CSS 고급 선택자 (0) | 2022.01.27 |
CSS 배경, 배경 이미지, 그라데이션 (0) | 2022.01.26 |