<frontend> {09} </transition. &. animation>

transition과   animation

• transform
• transition
• animation

 

 

 

---

1. transform

transform: 함수

ex)
<style>
	.rot:hover {transform: rotate(50deg);}
    #pers {perspective: 300px}
</style>
...
<div class="origin">
	<div class="rot">
    	<img src="a.png" alt="">
    </div>
    <div class="origin" id="pers">
    	<div class="rot">
        	<img src="a.png" alt="">
        </div>
    </div>

• 함수 종류
  • translate(tx, ty)
    • translate3d(tx, ty, tz)
  • scale(sx, sy)
    • scale3d(sx, sy, sz)
  • rotate(degree)
    • rotate(rx, ry, degree) 
    • rotate3d(rx, ry, rz, degree)
  • skew(ax, ay)

 

 

---

2. transition

transition이란, 웹 요소의 배경색이나 도형의 테두리 등 스타일 속성이 바뀌는 것.

 

• transition 대상을 지정하는 transition-property 속성
• transition 실행시간을 지정하는 transition-duration 속성
• transition 실행 형태를 지정하는 transition-timing-function 속성
• transition 지연시간을 지정하는 transition-delay 속성
• 위 4 속성을 한꺼번에 정하는 transition 속성

transition-property: all | none | <속성 이름>
transition-duration: <시간>
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-beizer(n, n, n, n)
transition-delay: <시간>


ex)
transition-property: background-color; 
transition-duration: 2s, 1s;
trasition-timing-function: linear;
transition-delay: 2s

transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>

 

---

3. animation

• pass