CSS

transition

a {
position: relative;
top: 100px;
right: -100px;
background-color: wheat;
color: tomato;
padding: 10px;
text-decoration: solid;
font-size: 100px;
border-radius: 50px;
transition: all 3s ease-in-out;
}

a:hover {
border-radius: 1000px;
color: yellow;
background-color: brown;
padding: 40px;
font-size: 200px;
top: 500px;
}

transition 은 상태에 따라 바뀌는 요소가 있을때 사용
ex) hover, active, focus ...

ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할

1. linear - 변화 그래프가 직선
2. ease-in - 시작과 끝이 빠름
3. ease-out - 시작과 끝이 느림
4. ease-in-out - 시작이 빠르고 끝이 느림
5. all : 변화 요소를 한번에 다룬다.
   ㄴ따로 다루고 싶으면 각각 써주면 됨

cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.