[css] Transform Transition Animation

Transform은 시간이랑 상관없이 키면 변해있다. 그냥 기존의 속성들로 만들어내야하는 좌표이동, 회전, 비틀기등을 translate, rotate, skew등의 명령어로 미리 만들어 놓은 것이다.

Transition은 한가지 요소가 상태에 따라 변화하는 과정 즉 반응을 보여주는 것이다. 과정의 duration, delay, timing-function등을 원하는대로 조정할 수 있다. transform을 transition에 주면 transform의 시간에 따른 변화를 보여줄 수 있다.

Animation은 여러 속성(기존 속성들과 transform을 포함)의 변화를 묶어서 보여줄 수 있다. 애니메이션을 사용할 때 width나 color등 한가지 속성값을 변화시킬 수도 있고, transform을 이용해 회전, 확대축소, 좌표이동등을 변화시킬 수도 있다.

 

1. Transform 

1. transform 속성들

• rotate(deg) : 입력한 각도만큼 회전, 음수도 가능
• scale(2,3) : width 2배, height 3배 확대 / 축소는 소수점으로
• skew(10deg, 20deg) : x축, y축으로 입력한 각도만큼 비틂
• translate(100px, 200px) : x축, y축으로 좌표 변경

2. prefix 접두사 

하위 버전에서도 실행하고 싶을 때 각 브라우저 별로 접두사를 붙임.

• -webkit-  크롬, 사파리
• -moz-  파이어폭스
• -ms-  익스플로러 9.0
• -o-  오페라

 

 

2. Transition

html 요소의 상태에 따른 변화를 보여주고 싶을 때 사용

1. Transition 속성들

• property : 효과를 적용할 css 속성
• duration : 효과가 지속될 시간
• timing-function : 효과의 속도 성격
  • lenear, ease-in, ease-out, ease-in-out 등이 있다.
• delay : 효과가 나타나기 전에 걸리는 시간

transition 프로퍼티에 transition의 속성들을 모두 한번에 줄 수 있다.

transition에 한번에 여러 속성을 줄 수 있지만, duration과 delay는 먼저 쓴 숫자가 duration으로 들어간다.
몇초가 하나만 있으면 duration으로 적용된다.

 

2. transition은 선택한 요소가 어떤 조건일 때 줄 수 있다.

transition은 html 요소가 변한 결과style과 transition속성 2가지를 줘야한다.

- transition속성은 html요소에 준다. 

- 결과 css는 대체로 pseudo class인 html요소에 적용한다.

<style>
	.box{
    	width:200px;
        height:200px;
        background:red;
        transition: background 2s ease-in-out 1s;
        }
	.box:hover{
    	background:blue;
    }
</style>

<div class="box"></div>

box 클래스가 :hover 상태일 때 background 색깔을 파란색으로 변화시킨다. transition 속성은 css를 .box:hover에 작성하기기 전엔 작동하지 않는다. 

기존 css에 background 속성을 주지 않았어도 상관없다.

 

3. Pseudo class

html 요소가 특정 상태일 때를 선택하여 css를 주기위한 class이다.

 

 

3. Animation

transition과 달리 조건에 상관없이 이벤트 적용할 때 사용.

1. animation 속성들

• animation-name : 임의로 작성가능한 애니메이션 이름
• animation-duration : 애니메이션 지속시간
• animation-timing-function : 애니메이션 속도 종류
• animation-delay : 애니메이션 효과가 나타나기 전에 걸리는 시간
• animation-iteration-count : 애니메이션 반복횟수
  
  • infinite : 무한히 반복
• animation-direction : 애니메이션 진행방향
  • alternate : from -> to -> from
  • reverse : to -> from, to -> from
  • normal : from -> to, from -> to
• animation 속성 하나로 위 속성들을 한줄로 작성 가능하다.
• @keyframes 애니메이션이름{} : from과 to 에 실질적인 애니메이션 효과를 작성

 

 

4. Transform & Animation

1. keyframes 안에 transform을 사용하면 transform에 변화의 조건을 조정할 수 있다.

2. prefix를 사용한 애니메이션을 작성했으면, 반드시 @keyfrmaes도 prefix별로 붙여서 작성해야한다.