transition과 transform

***참고 : CSS애니메이션 모듈과 CSS 트랜지션은 완전히 다르다~~!

transition (화면이동) : 변형되는 중간의 상태

transform (변형) 

 

transition에는 두개의 스타일이 필요하다. 첫번째 스타일은 초기상태이고, 두번쨰 스타일은 종료상태이다.

trigger :hover, :active, :target, :focus등이 있고, javscript를 활용해도 된다.

---

a { 
background: yellow;
color: #000; 

/* 전이가 일어날 속성값을 정의 */ 
transition-property: background-color; 

/* 전이가 발생되는 시간 명시 */ /* 1000밀리초와 같다 */
transition-duration: 1s;

/* 등속도 */ 
transition-timing-function: linear;

/* 500밀리초 */
transition-delay: .5s; 
 }
 
 a:hover { 
 background-color: blue; 
 color: #fff; 
 }

 

• transition-property : 화면 이동에 영향을 받는 속성으로 이 값을 지정하면 특정 사항에 대해서만 화면 이동 효과가 나타난다.(어떤 속성을 트랜지션 할 것인지)
• transition-duration : CSS 효과가 반영되는데 걸리는 시간, 즉 화면 이동이 종료되기 까지 걸리는 시간(트랜지션이 일어나는 지속시간)
• transition-timing-function : 타이밍 함수(어떤 움직임(시간에 따른 가속이나 감속)으로 반영할 것인지)
• transition-delay : 트랜지션 지연시간(애니메이션을 지연시킬 때)
• transition : 트랜지션 속기형(위의 속성들을 한데 모아서 작성할 때)

1. 애니메이션을 처리할 속성 (transition-property)

2. 애니메이션 지속 시간 (transition-duration)

3. 애니메이션 linear 여부 (transition-timing-function)

4. 애니메이션이 시작되는 시간 (transition-delay) 

 종합 표현 => transition: 속성 지속시간 timing속성 지연시간 ex) transition: opacity .5s linear 2s;

---

⭐hover상태일때 화면 전환이 일어나기를 원하는경우 :hover규칙이 아닌 원대상에 정의되어야한다.

이렇게 잘못작성하면 요소가 다시 점진적으로 변하지않고 본래의 기본스타일로 빠르게 되돌아간다.

 

잘못된 예

a { background: blue; }

a:hover { background: red; transition: background .5s ease-in-out; }

 

올바른 예

a { background: blue; transition: background .5s ease-in-out; }

a:hover { background: red; }

출처: https://webclub.tistory.com/620 [Web Club]

---

 

transform 속성 :

1. scale(1.2, 0.2)

2. rotate(180deg)

3. translate(-10px, 10px) x축또는 y축이동

4. skew() 기울이기

 

transform-origin : 옮기면서 지정 요소의 기준점또한 변경