CSS transform, animation

CSS transform, animation

CSS3을 기준으로 transform과 animation을 통해서 웹에 애니매이션 효과를 줄 수 있음.

width, height로도 크기 조절이 가능하지만 이건 갑자기 커지고, 다른 블록에도 영향을 주지만,
transform:scale(); 로 크기를 조절하면 다른 블록엔 영향을 안주고 좀더 세련되게 커지는 효과를 볼 수 있음.
transform-origin:right top; 이런식으로 커지는 기준점을 바꿀수 있음.(디폴트값은 블록의 가운데임)
transform:translate(30px, 10px); x축 30px, y축 10px 이동시킴.
transform:scale(1.5); 원래 크기보다 1.5배 커짐(x축 y축 모두)
transform-origin:0% 0%; 기준점이 가운데에서 왼쪽위가 기준이 됨.
transform-origin:100% 100%; 기준점이 오른쪽 아래가됨. (실제적으로는 기준점을 %로 지정하는게 편함)

transition:1s; 넣어주면 변화하는 모습이 1초동안 진행됨.(애니매이션 효과)(transform과 조화로 써주면 좋음)
transition은 숫자값의 변화를, 지정한 듀레이션 시간에 맞게 변화함.(auto로 설정하면 transition의 애니매이션 효과가 적용 안됨.)

animation은 transition과 다르게 키프레임을 줄 수 있음.
(움직였다가 도중에 다른 움직임으로 변경이 가능)

animation 만들기.

<style>
	@keyframes ani{
    0%{
    	transform:translate(0,0);
        }
    50%{ 
    	transform:translate(300px,0);
        }
    100%{
    	transform:translate(400px,500px);
        }
    }
</style>

이건 ani라는 애니메이션이고 시간 0%에는 위치가 0,0 이지만, 시간 50%에는 x축 300px, y축 0px, 시간 100%에는 x축 400px, y축 500px 이라는 뜻이다.
애니매이션 효과를 주고싶은곳에,

.box{ 
	animation:ani 2s;
    }

이렇게 주면 class가 box인 곳에 ani라는 애니메이션 효과가 2초동안 이루어진다.
그래서 50%인 1초가 지나면 x축 300px, y축 0px 만큼 이동하고 2초엔 최종적으로 400px,500px에 위치한다.

더 많은 속성을 보고싶다면 개발자도구에서 화살표를 누르면 디폴트값도 확인이 가능함.

animation:alternate;를 주면 0~100%까지 했던 애니매이션 효과를 100~0%순으로 역으로 한번더 실행한다.

background 사이즈를 줄일때는 / 이용하면 됨.(여기서는 원래 크기의 반의 크기로 사용하려고했음. 
(해상도가 더좋아지기 때문에)

background : ulr('') no-repeat 0 0/ auto 150px; (이말은 이미지 크기를 가로는 auto, 높이는 150px로 줄여달란 소리임)
(/ 괄호 뒤에 원래 이미지 사이즈가 W:5100, H:300이었는데 이중에 하나만 크기를 맞추고 나머지는 auto를 사용하면 전체가 다 크기가 원래 비율에 맞게 맞춰짐)

---

@keyframes spaceship-ani{
0%를 from 으로 대체가능{}
100%를 to 로 대체가능{}
그리고 0%는 CSS 원래 상태와 같다면 0%생략가능함.
}

.spaceship{
width: 150px;
height:150px;
background:url('') no-repeat 0 0/auto 150px;
anmaition: spaceship-ani 2s infinite steps(17); (step(17)로하면 끝좌표까지 쭈우우욱 가는게 아니라 17개로 끊어서 보여줘서 더 자연스러움(스프라잇 이미지예시일때))

gif로하면 투명도가 적용이 안됨.(그래서 배경색이랑 자연럽지 못함.)

---

부모 레이아웃에 perspecctive:800px; 이런식으로 주면 실제로 움직이는 자식 element가 시점에 따라 다른각으로 움직임.
똑같이 움직이게 만들고 싶으면, 실제로 움직이는 자식 element에 직접 transform: perspective(800px); 이런식으로 주면 됨.