transition | animation

transition

transition속성은 인터넷 페이지를 구성하고 있는 각 요소들이 일정 시간동안 변화하는 과정을 부드럽게 하는 애니메이션 효과를 줄 수 있다.

• transition-property: 속성이름;

  변화하고 싶은 속성 이름을 적으면 된다.

ex) transition-property:width; 
transition-property:opacity;

• transition-property: all;

  두개 이상의 효과를 내고 싶을 때 사용

• transition-duration: 시간;

  애니메이션의 작동시간을 설정하는 값

ex) transition-duration:0.5s;
transition-duration:500ms;

• transition-timing-function: 값;

  변하는 속도에 패턴을 지정할 수 있다.
  패턴
  • ease (기본값) 천천히 시작해서 점점 가속을 한다.
  • linear
  • ease-in
  • ease-out 빨리 시작해서 점점 느려진다.
  • ease-in-out
  • stop-start
  • stop-end
  • stops(int, start | end)
  • cubic-bezier(n,n,n,n)

• transition-delay: 시간;

  설정한 시간을 기다렸다가 작동되는 것
  다른 것이 먼저 작동하는걸 기다렸다가 작동하게 할 수도 있다.

transition 한번에 사용하기

transition을 줄때 사용 가능한 속성명 : 성 시 속 대 (속성,시간,속도,대기시간)
ex) transition : width .35s ease .1s;

transition: all .35s; (속성 시간)으로 많이 쓴다.

유용한 예제 사이트 wh3
https://www.w3schools.com/howto/howto_css_animate_buttons.asp

:hover

마우스를 올렸을 때의 효과를 나타낼 수 있는 속성

overflow:hidden

border 안에 글자가 넘어가면 글자를 넘어가지 않게 해주는 속성 이지만
img에서는 주어진 값보다 안에(자식) 컨텐츠가 더 크다면 가려주는 효과를 준다.

scale();

scale의 defaull값은 1이다.(scale(1);)
이미지가 크게 되는 효과를 위해선 scale(1.2)를 주고,
이미지가 작아지는 효과를 위해선 scale(0.8)

transform

자연스러운 애니메이션 효과를 줄 때 사용하며,
변화 전에 적용할 것인지, 변화하는 요소에 직접 적용할 것인지 생각 해야한다.
변화 전 원본 스타일에 적용하게 되면 커지고 작아지는 효과가 자연스럽게 나타나며,
hover같이 변화하는 요소에 직접 적용하게 되면 커지는건 자연스럽지만 마우스가 나가면 급격히 변한다.

transform: 속성1 속성2 속성3 …

transform 요소는 자식요소에게 상속한다.

• none : 기본값
• matrix
• translate
• scale
• rotate 회전
  • rotate
  • rotateX x축을 기준으로 회전한다
  • rotateY y축을 기준으로 회전한다
• skew 기울기
  • skew();
  • skewX();
    가로방향으로 기울인다.
    양수는 왼쪽으로,음수는 오른쪽으로 당긴 모양 **
  • skewY();
    세로방향으로 기울인다
• perspective

sprite 이미지를 활용한 애니메이션을 만들땐 이미지가 이동하면서 동작하기때문에 fade-out 효과가 없고

키프레임즈 안 퍼센트값마다 배경이미지르 단계적으로 줄땐 이미지가 바뀌는 속성값에 opercity가 적용되어 fade-out효과가 생긴다.