2021.07.07 CSS_애니메이션

hae.log·2021년 7월 7일

📒 Animation

✔ 웹사이트에서 interaction한 효과를 구현하고자 사용하는 태그

📌 transform

오브젝트 크기를 확대/축소 각도회전, 위치변경 할때 사용

css✍

.transform {
	width: 300px;
	height: 300px;
	background-color: yellow;
 transform: rotate(10deg);
 	margin-left: 300px;
    margin-top: 500px}

transform의 종류

2차원적 회전(평면적 회전구현) / 음수 : 왼쪽회전 양수 : 오른쪽회전

transform: rotate(45deg);

2.내가 선택한 영역을 비율로 키울때 (width값, height값) :내가 적은 크기만큼 크기키우겠다

transform: scale(0.5, 0.5);

선택한 영역에 각도를 3차원적인 효과를 적용하여 x축회전, y축회전/ 음수 : x축회전 양수 : y축회전

transform: skew(10deg, 20deg);

내가선택한 영역에 오브제트의 위치를 변경시킬때 x축,y축
margin, padding top left bottom right 외에도 translate로 자유롭게 움직일수 있다.

transform: translate(100px, 300px);

💡 transform 사용시 주의할 점
explorul 10.0 에서 사용가능하나 속성앞에 prefix를 붙여줌
각각의 브라우저에 version별 가능하도록 하는 기능

✔ 크롬,사파리

 -webkit-transform:  rotate(10deg);

✔ 파이어폭스

-moz-transform: rotate(10deg);

✔ 익스플로러 9.0까지 포함해서 적용하겟다(그이하는 안됌)

-ms-transform:  rotate(10deg);

✔ 오페라

-o-transform:rotate(10deg);

✔prefix가 없는 transform 값을 디폴트값으로 넣어주기

transform: rotate(10deg);

📌 transition

hover 조건이 들어가야 기능작동가능

.transition {
	width: 300px;
	height: 300px;
	background-color: yellow;
    transition-속성값: ;

✔ 변화를 주고자 하는 영역

	/*transition-property: width;*/

✔ 애니메이션이 진행되는 시간

transition-duration: 2s;

✔ 애니메이션이 움직이는 속도값 조절
linear : 시작부터 끝까지 일정한 속도를 유지하겠다

transition-timing-function: linear;

✔ 마우스를 올렸을때 바로 바뀌는것이 아니라 약간의 delay 후, 애니메이션 효과를 작동시키는 속성

transition-delay: 1s;

💡 transition-속성값이 반복적으로 들어가니깐, 한줄로 표현할수도 있다.

👉 transition:  width 2s, linear 1s, height 2s linear;

순서는 상관X
duration과 delay만 신경쓰기
먼저나오는 숫자 = duration
나중에나오는 숫자 = delay
숫자하나만 작성되면 자동적으로 duration으로 인식하여 변화하고 속성은 ,를 사용하여 추가할수있다.

📌 animation

✔ 자연스럽게 움직이는 효과를 주고싶을때 사용하는 속성

hover기능 (마우스를 올렸을때 변화주는 기능) 을 사용해서 효과줄때 사용자의 입장에서 움직임이 부자연스러우니깐 움직이는 과정을 보여주는 태그

.transition:hover {
	width: 600px;
	height: 600px; }
   
.animation {
	width: 300px;
	height: 300px;
	background-color: yellow; 
   
  👉  animation-속성값: ;

✔ animation이름 정하기

animation-name: changeWidth;

✔ 0~100까지 중 애니메이션이 작동하는 시간

animation-duration: 3s;

✔ 일정한 속도를 주는 linear

animation-timing-function: linear;

✔ 지정값 후에 실행

animation-delay: 1s;

animaition에만 있는 속성

✔ 반복실행 속성값 (무한번 하고싶을때 infinite)

animation-iteration-count: 6;

✔ animation이 작동하는 횟수

animation-direction: nomarl

animation의 진행방향 nomarl alternate: 갔다가 다시돌아오는 효과 interection count와 함께 기억해야함
interection count는 6번 반복하는데 from to 왕복 1번

📌keyframes

@keyframes changeWidth {
	0% {
		width: 300px;
		height: 300px;
		background-color: yellow;
	}

	50% {
		background-color: blue;
	}

	100% {
		width: 600px;
		height: 600px;	
		background-color: red; 
        }
        
       👉 animaiton속성을 구현할때 같이 나와야하는 코드 key frams 내가지정한 이름 300을시작으로600까지 변화를주겠다.

💡 keyframes를 사용할때 영어가 아닌 숫자로도 표기 가능
from=0% to=100% 숫자로도 가능하다는 것은 0%와100%사이
특정지점을 설정할수있다.

🚀코드정리

움직이는 사자만들기✍

.spin-lion {
		width: 150px;
		height: 150px;
		background-color: blue;

		
		animation-name: spinlion;
		animation-duration: 1.5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		
		한줄 요약 두개의 숫자중 먼저나오는 숫자가 
        	duration 뒤에나오는숫자가 delay 잘기억하기 
       		 숫자하나만 있으면 duration 

		animation앞에 prefix를 달아주었을때 keyframes와 연동되어있으니, 
		keyframs도 prefix를 만들어줘야함

		-webkit-animation: spinlion 1.5s linear infinite alternate 1s;
		animation: spinlion 1.5s linear infinite alternate 1s;}
	
@-webkit-keyframes spinlion {
	from {
		-webkit-transform: rotate(-10deg);
	}

	to {
		-webkit-transform: rotate(10deg);
	}
}

@keyframes spinlion {
	from {
		transform: rotate(-10deg);
	}

	to {
		transform: rotate(10deg);
	}
}