[HTML/CSS] Transition, Transformation, Animation

Transition

transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다. 변화하는 state에 애니메이션을 넣고 싶다면 사용한다. transition은 반드시 바뀌는 state가 아닌 원래의 상태(root)에 해당하는 것에 써야한다. 그래야 hover의 경우 마우스를 올려놨을 때, 뗐을 때 둘다 작동하게 된다. 그리고 변화하는 것을 처음에 뭐에서 뭐로 바뀌는지 정확히 쓸 것! transition에 여러개를 개별적으로 설정하고 싶다면 ,를 이용하면 된다. 전부다 똑같은 설정이면 all을 쓰면 된다.

a {
color: wheat; 
background-color: tomato;
transition : color 5s easy-out, background-color 1s easy-in-out;
}
a:hover {
color: tomato; 
background-color: wheat;
}

 

Transformation

transformation은 다른 box나 이미지에 영향을 미치지 않고 이동이나 변형을 할 때 쓰인다. box차원이 아니라 화면의 픽셀을 변형시키는 것이여서 옆에 있는 다른 요소들은 바뀌었다는 것을 인지하지 못하기 때문이다. 또 3d를 기반으로 하기 때문에, box처럼 margin, padding을 사용할 수 없다. transition과 함께 사용해야 부드럽게 전환되면서 예뻐지기에 꼭 같이 사용해야된다. 참고로 border_radius: 50%;을 해주면 정확히 원형으로 테두리가 바뀐다.

<style>
img {
    border: 10px solid black;
    border_radius: 50%;
    transition: transform 5s easy-in-out:
}
img:hover {
	transform: rotateZ(90deg) scale(0.5);
}
</style>

위의 경우 img를 hover하면 z축으로 90도가 회전하고 크기가 0.5만큼 감소한다.

 

Animation

transition과 달리 굳이 hover와 같은 state의 변화가 아니더라도, 마우스를 갖다대지 않고도 실행이 되는 애니메이션을 만들고 싶을 때 사용한다. infinite 속성으로 끊임없이 나타나게도 할 수 있다.

<style>
    @keyframes superSexyCoinFlip {
        from {
            transform: rotateY(0);
        }
        to {
            transform: rotaeY(180deg) translateX(180px);
        }
    }
    img {
    	animation: superSexyCoinFlip 5s ease-in-out infinite;
    }
</style>

@keyframes 옆에 만들고싶은 애니메이션 이름을 적고 어떤 상태에서(from) 어떤 상태로(to) 변화하는 애니메이션을 만들 것인지 transform으로 설정한다. 만약 위와 같이 2가지 ( from, to) 변화가 아니라 그 이상의 변화를 원하면 0~100% 사이에 원하는 값을 넣어서 세부 설정을 할 수 있다. 예를 들어 0% 50% 100%로 세가지 변화를 따로 설정할 수 있다.