[Glider] 2. CSS 애니메이션 효과 주기 (+ 로고 만들기)

새 프로젝트의 로고를 만들어 봄.

 

 

 

폰트는 04b_20

 

애니메이션에 skew 속성을 줬다.

 

로딩 스피너나 첫 화면에 적용할 예정.

 

 

animation: driveOut 2s forwards 1;

순서대로

1. 애니메이션 이름
2. 동작 시간
3. 애니메이션 완료 후 상태

- foward, both 의 경우 끝나고 마지막 프레임 고정, 생략 시 처음 상태로 돌아감.

- 기본 속성은 none

4. 애니메이션 동작 횟수 (숫자, infinite)

 

근데 순서대로 안해도 생각한 값 들이 알아서 들어간다. 예를들면

/* 결과가 똑같음 */
animation: 2s 1 forwards driveOut;
animation: 2s 1 driveOut forwards;

값을 보고 어떤 속성의 값 인지 판단하는듯 함.

 

단 숫자처럼 판별하기 어려운 경우엔 아래 순서대로 들어감.

 

animation-duration: 2s; 
animation-timing-function: ease; 
animation-delay: 0s; 
animation-iteration-count: 1; 
animation-direction: normal; 
animation-fill-mode: forwards; 
animation-play-state: running; 
animation-name: driveIn;

 

키프레임은.. SCSS 에서 좀 더 멋지게 쓰는 방법이 있으니 나중에 써보기로 함.

 

 

 

 

간단하게 효과를 줄때는 transition 속성을 주기도 한다.

transition: all .2s ease;

 

마찬가지로 축약으로 사용 시, 아래와 같이 풀이된다.

transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0s;

transition 속성은 모든 상태가 서서히 변하게 된다.

 

 

 

참고하면 좋은 포스트 : https://brunch.co.kr/@99-life/3

애니메이션과 관련된 속성