모션그래픽 : 전환(transition) - 생활코딩

예제 - transition_2.html

<!doctype html>
<html>
<head>
  <style>
    body{
      background-color: black;
      transition:all 1s;
    }
    div{
      background-color: black;
      color:white;
      padding:10px;
      width:100px;
      height:50px;
      -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
 
      -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    }
    div:hover{
      height:400px;
    }
  </style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
  <div>
    TRANSITION
  </div>
</body>
</html>

포토샵, 일러스트레이션 등의 프로그램이 아닌

CSS 코드를 통해서 애니메이션 작업이나 그래픽 작업을 할 수 있음. (모션그래픽)

전환은 효과를 부드럽게 처리하는 CSS 기능.

Codepen 에서 transition 검색해서 효과 확인.

transition : 장면 전환을 부드럽게!

transition-duration : 몇 초에 걸쳐서 전환.

transition-property : 어떤 속성에 적용.

transition-delay : 처음과 시간차를 둠.

transition-function : 전환 속도를 균일하지 않게 만드는 기능.

'코딩' 카테고리의 다른 글

유지보수 : 코드 경량화(minify) (0)	2017.02.24
유지보수 : link와 import (0)	2017.02.24
그래픽 : SVG (0)	2017.02.23
그래픽 : 변형(transform) (0)	2017.02.23
그래픽 : 혼합(blend) (0)	2017.02.23