[TIL_08]transition 과 transformation

transitions

active해당 요소를 마우스로 클릭했을 댸 효과 적용.

focus키보드로 요소가 선택되었을 때 효과 적용.

hover마우스가 해당 요소 위를 지나갈 때 효과 적용.

visited방문한 사이트일 경우 효과 적용.

focus-within
focused인 자식을 가진 부모에게 적용되며 자신의 자식 요소 중 하나가 focused 되었을 때 효과 적용.
state는 다른 element와 연계해서 사용 할 수 있다.
ex. form:hover input:focus{}
element에 무엇을 두던 애니메이션 변화를 주려면 state(a:hover{})에도 꼭 있어야 한다.

transition:

• state에 있을 수 없다.
  transition이 가장 처음 생겨난 곳(root), 즉 element에 있어야 한다.
• 상태에 따라 바뀌는 요소가 있을 때 사용한다. ex. hover, active, focus...

ease-in-function: 브라우저에게 애니메이션이 어떻게 변할지 말해준다.
더 자세한 각 기능 설명은 mdn:easing-function 참고.

transformation

말 그대로 한 요소를 변형 시킬 수 있음.
box element와 이미지에는 영향을 끼치지 않는다.

@keyframes 를 이용한 애니메이션

@keyframes superCoinFlip{
           from{
              transform:rotateX(0);
              }
           to{transform:rotateX(360deg);
              }
            }
 img{
   border:1px solid;
   border-radius:50%;
   animation:superCoinFlip 5s ease-in-out infinite;
   }

from ~ to: 한 번 회전하고 나면 끊겼다가 다시 회전한다.

@keyframes superCoinFlip{
              0%{
               transform:rotateY(0);
               }
              50%{
               transform:rotateY(180deg);
               }
              100%{
               transform:rotateY(0);
               }
               }
img{
   border:1px solid;
   border-radius:50%;
   animation:superCoinFlip 5s ease-in-out infinite;
   }

중간에 끊김없이 계속해서 움직이고 0에서 100까지의 스텝을 원하는 만큼 줄 수 있다.