Advanced CSS

Trasition

transition
어떤 상태에서 다른 상태로의 변화를 보내주는 애니메이션이다

 

            a {
                color: white;
                background-color: tomato;
                text-decoration: none;
                padding: 3px 5px;
                border-radius: 5px;
                font-size: 55px;
                transition: background-color 10s ease-in-out, color 5s ease-in-out;
            }
            a:hover {
                color: tomato;
                background-color: wheat;
            }

쓰는 법 1: transtion은 state가 없는 요소에 붙어야 한다
처음 생긴 곳에 있어야 한다
state에 transition을 준다면 변화를 준 것(예를 들면 hover라면 마우스를 갖다 댄 것)을 그만할 경우(마우스를 뗄경우)
원래 상태로 바로 돌아간다

쓰는 법 2: transtion에 변화를 준것들은 state에 들어있는 것들이 기준이 되어 바뀌는 것이다
바뀌는 것들에 한정하여 transition 이 일어날 수 있다

color와 background-color를 state에 적었으므로 바뀌는 것도 이 두 개만 할 수 있다. 다른 것을 바꾸기 위해서는 state에 더 넣어주면 된다. ex) border, font.....

 

---

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

-linear - 변화 그래프가 직선

-ease-in - 시작과 끝이 빠름

-ease-out - 시작과 끝이 느림

-ease-in-out - 시작이 빠르고 끝이 느림

all : 변화 요소를 한 번에 다룬다.

---

- transformation은 한 요소를 transform 시킬 수 있다.

- border-radius에 50%를 준다면 원이 된다.

- translate은 transformation을 적용시키긴 하지만, 다른 형제(sibling)를 변화시키진 않는다.
→ transformation은 box element를 변형시키지 않는다.
→ margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.
→ margin, padding을 위해서 translateX, translateY를 사용하지 않는다.

- transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다.

---

애니메이션 만들기
@keyframes 애니메이션 이름 {
from {
}
to {
}
}
사용하기
img {
animation : 애니메이션 이름 재생시간 옵션
}

 

무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.

 

---

- from to 말고, 1,2,3,4,5... 10 혹은 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니메이션을 만들 수 있다.

- 다른 property들도 애니메이션으로 만들 수 있다. 꼭 transform만 써야 하는 건 아니지만, transform을 쓰는 걸 권한다. 일부 property는 애니메이션이 잘 안 되기 때문이다.