css로 변형 속성

변형 속성 (대부분 script로 하기 때문에 알고만 있기)

• li {transition-duration: 3s} —> 3초 걸리게
• li {transition-delay: 3s} —> 동작 3초 후 작동
• li {transition-delay: 3s} —> 동작 3초 후 작동
• li {transition-delay: 3s} —> 동작 3초 후 작동
• li {transition-timing-function: ease-in} —>점점 빨라짐
• li {transition-timing-function: ease-out} —>점점 느려짐
• li:hover {}
• li:active {} —> 클릭하고 있는 동안의 상태

키프레임

.circle {
	animation-name: ani
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;  ---> 역방향으로 다시 진행
	animation-timing-function: ease-in;
}
.circle:hover {
	animation-play-state: paused;
}  --> hover 시 멈춤

@keyframes ani {
        from {transform: rotate(0deg)}
        to {transform: rotate(360deg)}
      } ---> 360도 돌아감

*from을 따로 선언 할 필요 없으면 비워둬도 됨*

벤더프리픽스: 모든 브라우저에서 다 지원 가능할 수 있도록 하는 소스( 경로 링크 걸면 됨- <script src="prefixfree.min.js"></script> )

transform-origin

transform-origin: top right —> transform 중심축을 상단 오른쪽으로 바꿈
transform-origin: 50% 0 -> x축 50% y축 0으로 중심축 이동