Learn CSS Animation by Building a Ferris

transform element

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 / 좌표 공간을 변경

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

transform-origin element 

요소 변형의 원점을 설정

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

transform-origin - CSS: Cascading Style Sheets | MDN

 

@keyframes

CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법

 

@keyframes를 사용하기 위한 조건

• animation-name : 사용자가 지정한 이름. @keyframes가 적용될 애니메이션의 이름
• 스테이지 : from -to로 0~100%의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 

@keyframes wheel {
          --------- 이름 지정   
   0% {
     transform: rotate(0deg);        ---- 0% 0deg : 움직이지 않음
   }
  100%{
    transform: rotate(360deg);       ----- 100% 360deg 움직임
    }
}

@keyframes wheel {
	from {
     transform: rotate(0deg);     
   }
  to{
    transform: rotate(360deg);       
    }
}

https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

@keyframes - CSS: Cascading Style Sheets | MDN

 

Animation

속성의 이름을 지정하거나, 지속시간/속도 조절 등을 지정할 수 있음

• animation-name : @keyframes 이름
• animation-duration : 타임 프레임의 길이, 키프레임이 동작하는 시간 설정
• animation-timing-function : 애니메이션 속도 조절 / 그래프 (linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier)
• animation-delay : 애니메이션을 시작하기 전 지연시간 설정
• animation-iteration-count : 반복 횟수 지정
• animation-direction : 반복 방향 설정 (정방향 / 역방향 / 번갈아가며)
• animation-fill-mode : 애니메이션 시작 / 끝 상태제어 (none / forwords / backwords / both)  

animation  속성

animation: cabins 10s linear infinite;
        name  / duration / timing-function / iteration-count

https://pro-self-studier.tistory.com/108

CSS 애니메이션 구현 - @keyframes 와 animation 속성을 이용하여