css 트랜지션

Css 작업을 하다보면, 욕심이 생긴다.
괜시리 아이폰 페이지를 따라만든답시고, 스크롤에 따른 애니메이션을 야매로 넣어보기도 하기도 했다.
그런데 매번 필요한 기능만을 검색하다가는 기초 원리도 모르고 따라치는게 아닌가 싶어 css 트랜지션을 공부하기로 결심했다.

트랜지션

키프레임을 활용한 트랜지션이 있다.
From , To
0부터 100%로 나타내는 방법이다. 둘다 비슷한 기능이지만 숫자를 활용하다보면
중간 값에 새로운 데이터를 줄 수 있다는 장점이 있다.

<style>

.박스 {
    width= 100px
    heighy= 100px
    background-color = blue
    animation = "트랜지션이름"
}

@keyframe 트랜지션이름 {
	from{
    	기존 Css 값
        ex) background-color = blue;
    }
	to{
    	변화할 css 값
        ex) background-color = red;
    }
}
</style>

<div class="박스"></div>

위와 같이 적용 했을때, 해당 div 박스는 아무런 조치를 취하지 않아도 색상이 변하게 된다.
여기에 ms나s 단위를 입력해서 조절할 수 있다.

direction을 설정해 0부터 100을 입력하면 정방향으로 흘러가 파랑 -> 빨강이 되고
반대로 입력하면 빨강->파랑 으로 변하게 된다.

animation-direction: normal;
animation-direction: reverse;

참고로, 애니메이션은 한번 실행하면 초기 상태로 돌아가게 되는 것이 기본 세팅이다.

애니메이션의 축약형은 아래처럼 사용한다