여러가지 효과 transition, animation, transform

1. transition : 

속성의 변화에 단순한 애니메이션 적용.

단독 사용은 불가, hover, click 등 사용자 반응에 의해 이벤트가 실행될때 주는 효과

속성별로 시간을 따로 줄 수 있다.

 

transition : property duration timing-function delay; (효과, 지속시간, 효과의 변화 유형, 지연시간)

 

.box {width:50px;height:50px;background:#f00;transition:all 1s;} 

.box:hover {width:100px;height:100px;background:#ff0;margin-left:20px;}

 

or

 

.box {transition:width 0.5s, height 2s, background-color 1s;}

 

 

www.w3schools.com/cssref/css3_pr_transition.asp

 

* timing-function : linear, ease, ease-in, ease-out, ease-in-out..

 

 

 

 

 

2. animation

transition 과 달리 단독 사용이 가능하다. 즉 사용자의 반응(hover, click..) 없이 사용 가능

시간에 따른 다양한 제어를 할 수 있다.

@keyframe(동작 상세 정보)를 연결하여 사용.

 

animation: 키프레임 이름(가상), 시간, 반복여부(숫자로 지정 가능)

@keyframes 선언한 키프레임 이름

 

.box {width:50px;height:50px;background:#f00;animation: test 3s infinite;}

 

@keyframes test {

  0%{width:50px;height:50px;}

  50%{width:100px;height:50px;margin-left:50px;transform:rotate(180deg)} /* transform 의 다양한 효과 */

  100%{width:50px;height:50px;}

}

 

-> 상단에 선언한 3초의 0%, 50%, 100% 

 

 

www.w3schools.com/cssref/css3_pr_animation.asp

 

 

 

 

 

3. transform (scale, translate,rotate, skew..)

이동, 회전, 확대축소, 비틀기 등 다양한 효과, 애니메이션과 조합하여 사용 가능

알아두면 좋은 transform의 효과 'scale, translate,rotate, skew'

 

scale(x, y) : (x, y) 만큼 커짐

translate(x값, y값) : 오른쪽, 아래로 이동 / translateX(), transleteY() 따로 설정 할 수 있다.

rotate(숫자deg) : (숫자) 만큼 시계방향으로 회전

skew(숫자deg) : (숫자) 만큼 비틈

 

.box {position:absolute;top:200px;height:200px;width:50px;height:50px;background:#f00;transform:rotate(50deg);}

 

or

 

.box {position:absolute;top:200px;height:200px;width:50px;height:50px;background:#f00;}

.box:hover {transform:scale(2);}

 

or

 

.box {position:absolute;top:200px;height:200px;width:50px;height:50px;background:#f00;animation:test 2s;}

@keyframes test { 

  0%{opacity:0;transform:translateY(100px)}

  50%{opacity:0;transform:translateY(0px)}

}

 

 

or

 

.box {position:absolute;top:200px;height:200px;width:50px;height:50px;background:#f00;}

.box:hover a {color:#666}

.box a:after {content:'&';transition:transform:0.5s;}

.box:hover a:after {transform:rotate(180deg);}

 

 

www.w3schools.com/cssref/css3_pr_transform.asp