smarti,스마트아이

CSS3 transition, animation

Transition (전환)

CSS3에서는 transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다.

Transition 지원 버전

CSS3 전환(transition)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
transition / transition-delay / transition-duration / transition-property / transition-timing-function	10.0	26.0 / 4.0 -webkit-	16.0 / 4.0 -moz-	6.1 / 3.1 -webkit-	12.1 / 10.5 -webkit

transition 속성

전환(transition)을 위해 제공되는 속성(property)는 다음과 같다.

1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function

transition 속성은 다음과 같은 순서로 정의할 수 있습니다.

1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정한다.
2. 추가할 전환 효과가 지속될 시간을 설정한다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제이다.

div.keyboard {
    width: 100px;
    -webkit-transition: width 1s;
    transition: width 1s;
}
div.keyboard:hover { width: 300px; }

또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비뿐만 아니라 높이까지도 변경하는 예제이다.

#resize {
    height: 100px;
    width: 150px;
    -webkit-transition: width 1s, height 3s;
    transition: width 1s, height 3s;
}
#resize:hover { width: 300px; height: 500px; }

지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것이다.

transition-timing-function 속성

transition-timing-function 속성은 전환(transition) 효과의 시간당 속도를 설정한다.

transition-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있다.

1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행된다.
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다.
3. ease-in : 전환(transition) 효과가 천천히 시작된다.
4. ease-out : 전환(transition) 효과가 천천히 끝난다.
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝난다.
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

div {
    width: 100px;
    -webkit-transition: width 1s;
    transition: width 1s;
}
#div_01 {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
#div_05 {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
div:hover { width: 300px; }

transition-delay 속성

transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정한다.
전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

#resize {
    height: 100px;
    width: 150px;
    -webkit-transition: width 1s, height 2s;
    transition: width 1s, height 2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
#resize:hover { width: 300px; height: 300px; }

transition 효과와 변형(transform) 효과의 동시 적용

전환(transition) 효과와 변형(transform) 효과를 같이 적용할 수도 있다.

<style>
    #windmill {
        height: 100px;
        width: 100px;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        transition: width 2s, height 2s, transform 2s;
    }
    #windmill:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>

CSS3 transition 속성

속성	설명
transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
transition-property	요소에 추가할 전환(transition) 효과를 설정함.
transition-duration	전환(transition) 효과가 지속될 시간을 설정함.
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정함.
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

Animation

CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있다. CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했다. 하지만 CSS3에서는 애니메이션 효과를 손쉽게 적용할 수 있게 되었다.

CSS3 Animation 지원 버전

CSS3 애니메이션(animation)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
@keyframes / animation	10.0	43.0 / 4.0 -webkit-	16.0 / 5.0 -moz-	9.0 / 4.0 -webkit-	30.0 / 15.0 -webkit / 12.0 -o-

@keyframes 규칙

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 한다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다.

@keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것이다.

애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해 주어야 한다.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;
    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

위의 예제에서 from 키워드에는 처음 스타일을 명시하고, to 키워드에는 마지막 스타일을 명시한다.

하지만 좀 더 복잡한 애니메이션 효과를 나타내기 위해서는 from 키워드나 to 키워드 대신에 퍼센트(%)를 사용할 수 있다.
0%에는 처음 스타일을, 100%에는 마지막 스타일을 명시하고, 중간에 원하는 수만큼의 키 프레임을 생성할 수 있다.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    @-webkit-keyframes movingPara {
        0% { border-color: red; }
        20% { border-color: orange; }
        40% { border-color: yellow; }
        50% { border-color: green; }
        60% { border-color: blue; }
        80% { border-color: navy; }
        100% { border-color: purple; }
    }
</style>

재생이 모두 끝난 애니메이션 효과는 해당 요소가 맨 처음 가지고 있던 스타일로 요소를 되돌려 놓는다.

animation-duration 속성

animation-duration 속성은 애니메이션 효과를 재생할 시간을 설정한다. 재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것이다.

animation-delay 속성

animation-delay 속성은 애니메이션 효과가 나타나기까지의 지연 시간을 설정한다. 애니메이션 효과는 이 속성값으로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

p {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 2s;
    animation-name: movingPara;
    animation-duration: 4s;
    animation-delay: 2s;
}

animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션 효과의 반복 횟수를 설정한다. 이 속성값으로 infinite를 설정하면, 애니메이션 효과가 무한히 반복될 것이다.

<style>
    #one, #loop {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    #one {
        -webkit-animation-iteration-count: 2;
        animation-iteration-count: 2;
    }
    #loop {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
</style>

animation-direction 속성

animation-direction 속성은 애니메이션의 진행 방향을 설정한다. 진행 방향을 나타내는 속성값으로 reverse와 alternate를 설정할 수 있다.

reverse 속성값은 애니메이션 효과의 진행 방향을 원래 방향이 아닌 반대 방향으로 변경한다. 즉, 애니메이션 효과가 from에서 to 방향이 아닌, to에서 from 방향으로 진행된다.

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        animation-name: movingPara;
        animation-duration: 2s;
    }
    #backward {
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }
</style>

alternate 속성값은 애니메이션 효과의 진행 방향을 애니메이션이 반복될 때마다 계속 변경한다.
즉, 애니메이션 효과가 from에서 to 방향으로 한 번 진행되고 나면, 다음번에는 to에서 from 방향으로 진행되게 변경시킨다.
이런 식으로 번갈아 가면서 전체 반복 횟수만큼 애니메이션을 반복하게 된다.

<style>
    div {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 4;
        animation-name: movingPara;
        animation-duration: 2s;
        animation-iteration-count: 4;
    }
    #backward {
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
</style>

animation-timing-function 속성

animation-timing-function 속성은 애니메이션 효과의 시간당 속도를 설정한다.

animation-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있다.

1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행된다.
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다.
3. ease-in : 애니메이션 효과가 천천히 시작된다.
4. ease-out : 애니메이션 효과가 천천히 끝난다.
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝난다.
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

<style>
    div {
        -webkit-animation: timingFunc 4s 3;
        animation: timingFunc 4s 3;
    }
    #div_01 {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    #div_05 {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    @keyframes timingFunc {
        from { left: 0px; }
        to { left: 300px; }
    }
</style>

 

애니메이션 축약 표현(animation shorthand)

모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

div {
    animation-name: myShorthand;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

위의 예제와 똑같은 애니메이션 효과를 다음과 같이 표현할 수 있다.

div { animation: myShorthand 3s ease-in-out 1s 3 alternate; }

#long {
    -webkit-animation-name: myShorthand;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-direction: reverse;
    animation-name: myShorthand;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
#short {
    -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
    animation: myShorthand 3s ease-in-out 1s 3 reverse;
}

CSS3 animation 속성

속성	설명
animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
animation-name	애니메이션 효과의 이름을 설정함.
animation-duration	애니메이션 효과를 재생할 시간을 설정함.
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정함.
animation-direction	애니메이션의 진행 방향을 설정함.
animation-timing-function	애니메이션 효과의 시간당 속도를 설정함.
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
animation-play-state	애니메이션 효과의 재생 상태를 설정함.

 

[세상살이] - 입동, 겨울 배경 이미지 무료 다운로드 받기

입동, 겨울 배경 이미지 무료 다운로드 받기

[코딩공부] - HTML 공간 분할(layout, iframe, block & inline)

HTML 공간 분할(layout, iframe, block & inline)

[디자인공부] - 포토샵으로 자신만의 세계, 판타지 맵 만들기

포토샵으로 자신만의 세계, 판타지 맵 만들기

[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷

WebP 웹을 위한 새로운 이미지 포맷

[디자인공부] - 포토샵으로 은(Silver)색 문자 만들기

포토샵으로 은(Silver)색 문자 만들기