CSS Animation : Transition

참조 : http://www.beautifulcss.com/archives/2026

 

# Transition

- 제한적 애니메이션.

- 기존의 객체 속성이 변할때, 천천히 변하게 한다.

- 모양 왜곡 없음. 동작반복 없음.

.ex-01 {
    display: inline-block;
    margin: 0;
    padding: 20px;
    text-decoration: none;
    font-size: 12px;
    color: white;
    background-color: black;
    transition: all 1s;
}
 
.ex-01:hover {
    padding: 30px;
    color: yellow;    
    background-color: red;
}

div { transition: property duration timing-function delay; }

 

# 각각의 속성이 따로 transition 을 가질 경우

아래와 같이, 속성별로 따로 줄 수 있다.

div {
    transition: background 2s ease 1s,
                padding 1s linear 2s;
}

 

# 여러 속성이 동일 transition 을 가질 경우

div {
    transition-property: width, color;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 3s;
}

transition 속성 설명속성값

transition-property	transition 효과를 적용할 속성들을 나열합니다. 2개 이상일 경우는 쉼표(,)로 구분합니다.
transition-duration	transition 효과의 지속 시간을 표기합니다. 1s는 1초입니다. 만일 1초로 설정했다면, 모든 변화가 1초 안에 끝납니다.
transition-timing-function	변화의 시작과 끝 타이밍을 정의합니다. 예를들면, 빠르게 시작해서 느리게 끝나는 등의 효과가 그것입니다.
transition-delay	효과의 지연시간을 정의합니다. 만일 3초(3s)로 설정했다면, 페이지가 로드되고 나서 3초 후에 transition 효과가 시작됩니다.

 

# 여러 속성이 일부 transition 만 가질 경우

- 아래 코드에서 "각 속성의 항목이 모두 4개" 이며, 순서가 같은 항목끼리 동작한다.

div {
    transition-property: width, height, border-width, color;
    transition-duration: 1s, 2s, 1s, 3s;
    transition-timing-function: ease ease-in ease-out linear;
    transition-delay: 3s, 1s, 1s, 2s;
}

 

# 타이밍

 

transition-timing-function 속성 설명속성값

ease	기본값입니다. 느리게 시작하여 점점 빨라졌다가 느리게 끝납니다. 일반적으로 이 속성을 사용하면 대부분의 움직임이 자연스러움을 갖습니다.
linear	모든 속도가 같은 등속 운동입니다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동합니다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 끝납니다.
ease-in-out	ease와 비슷합니다. 느리게 시작하여 느리게 끝납니다.
cubic-bezier(n,n,n,n)	처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있습니다. 베지어(Bezier)라는 곡선 운동을 정의합니다.

# Example

.ex-02 {
    display: inline-block;
    margin: 0;
    width: 80px;
    height: 80px;
    line-height:80px;
    text-decoration: none;
    font-size: 12px;
    color: #999;
    background-color: #f4f4f4;
    border-width: 1px;
    border-style: solid;
    border-radius: 10%;
    border-color:#999;
    transition: width .2s ease,
				height .2s ease,
				line-height .2s ease,
				color .2s ease,
				font-size .2s ease,
				border .2s ease,
				background-color .2s ease,
				border-radius .2s ease .4s;
}
 
.ex-02:hover {
    width: 120px;
    height: 120px;
    line-height:120px;
    color: #ffcccc;
    font-size: 20px;
    border-width: 5px;
    border-color:#ff5e5d;
    background-color: #fa8382;
    border-radius: 50%;
}