CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Mouse over the element below:
Transition
Browser Support
The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| transition | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-delay | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-duration | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-property | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-timing-function | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
What Are CSS3 Transitions?
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
- the CSS property you want to add an effect to
- the duration of the effect
Example
Add a transition effect on the width property, with a duration of 2 seconds:
{
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
Note: When the cursor mouse out of the element, it gradually changes back to its original style.
Multiple Changes
To add transition effects for more than one CSS property, separate the properties with a comma:
Example
Add transition effects on width, height, and transformation:
{
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
Try it yourself »
More Transition Examples
The example below uses all the four transition properties:
Example
{
/* For Safari 3.1 to 6.0 */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
Try it yourself »
The same transition effects as the example above. However, here we are using the shorthand transition property:
Example
{
-webkit-transition:width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
Try it yourself »
CSS3 Transition Properties
The following table lists all the transition properties:
| Property | Description | CSS |
|---|---|---|
| transition | A shorthand property for setting the four transition properties into a single property | 3 |
| transition-delay | Specifies when the transition effect will start | 3 |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete | 3 |
| transition-property | Specifies the name of the CSS property the transition effect is for | 3 |
| transition-timing-function | Specifies the speed curve of the transition effect | 3 |
출처 - http://www.w3schools.com/css/css3_transitions.asp
CSS3 스펙 꾸러미의 일부인 CSS 트랜지션(transitions)은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.
두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.
CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다.
애니메이션 가능한 CSS 속성은?
웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 트랜지션을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, 애니메이션 가능한 속성의 집합은 유한한 집합으로 제한됩니다.
또한, 종종 auto 값은 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 이는 브라우저와 버전에 따라 예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.
.appendChild()로 DOM에 요소를 추가하거나 display: none; 속성을 제거하고 나서 바로전 트랜지션을 사용할 때 주의해야 합니다. 이것은 마치 초기 상태가 결코 일어나지 않고 그 요소가 항상 마지막 상태에 있는 것처럼 보입니다. 이 제약을 극복하는 쉬운 방법은 트랜지션해서 갈 CSS 속성을 변경하기 전에 수 밀리초의 window.setTimeout()를 적용하는 것입니다.
다수의 애니메이션이 적용된 속성 예제
HTML 내용
<body>
<p>아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.</p>
<div class="box"></div>
</body>
CSS 내용
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
트랜지션 정의에 사용한 CSS 속성
CSS 트랜지션은 단축(shorthand) 속성 transition을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.
여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:
(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS transition들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 CSS animation 속성을 살펴보세요.)
transition-property- 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.
transition-duration- 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
transition-duration: 0.5stransition-duration: 1stransition-duration: 2stransition-duration: 4s transition-timing-function
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.transition-timing-function: easetransition-timing-function: lineartransition-timing-function: step-endtransition-timing-function: steps(4, end)transition-delay- 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
transition-delay: 0.5stransition-delay: 1stransition-delay: 2stransition-delay: 4s
다음과 같이 단축 CSS 문법을 사용합니다.
div {
transition: <property> <duration> <timing-function> <delay>;
}트랜지션 완료 감지하기
트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 transitionend이며, WebKit에서는 webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. transitionend 이벤트는 두 속성을 제공합니다.
propertyName- 트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열
elapsedTime- 이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수. 이 값은
transition-delay값에 영향을 받지 않습니다.
평소대로 element.addEventListener() 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.
el.addEventListener("transitionend", updateTransition, true);transitionend 이벤트는 발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.속성값 목록이 다른 개수를 가진 경우
어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}위는 아래와 같이 처리합니다.
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}비슷하게, 어떤 속성의 값 목록이 transition-property 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}위를 아래와 같이 해석합니다.
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}간단한 예제
이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.
#delay1 {
position: relative;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 14px;
}
#delay1:hover {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 36px;
}메뉴 하이라이팅에 트랜지션 사용
CSS의 흔한 사용은 사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.
코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, (여러분의 브라우저가 트랜지션을 지원한다고 가정하면) 라이브 데모를 보고 싶을지도 모르겠습니다. 그것이 사용한 CSS를 직접 볼 수도 있습니다.
우선 HTML을 사용하여 메뉴를 설정합니다.
<div class="sidebar">
<p><a class="menuButton" href="home">Home</a></p>
<p><a class="menuButton" href="about">About</a></p>
<p><a class="menuButton" href="contact">Contact Us</a></p>
<p><a class="menuButton" href="links">Links</a></p>
</div>그리고 우리 메뉴의 모습과 느낌(look and feel)을 CSS로 만듭니다. 관련 부분이 여기 있습니다.
.menuButton {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
text-align: left;
background-color: grey;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: black;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 1px black;
}
.menuButton:hover {
position: relative;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
background-color:white;
color:black;
box-shadow: 2px 2px 1px black;
}이 CSS는 그 요소가 :hover 상태일 때 배경과 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.
그 효과를 장황하게 설명하는 대신, 브라우저가 트랜지션을 지원한다면, 라이브 샘플을 살펴보세요.
트랜지션을 이용하여 JavaScript 기능 부드럽게 하기
트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.
<p>Click anywhere to move the ball</p>
<div id="foo"></div>JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
f.style.left = (ev.clientX-25)+'px';
f.style.top = (ev.clientY-25)+'px';
},false);추가 노력 없이 CSS로 이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.
p {
padding-left: 60px;
}
#foo {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}여기에서 확인할 수 있습니다. http://jsfiddle.net/RwtHn/5/
스펙
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions | Working Draft | Initial specification. |
브라우저 호환성
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 -webkit 26.0 | 4.0 (2.0) -moz 16.0 (16.0) | 10 | 10.5 -o 12.10 | 3.2 -webkit |
transitionend event | 1.0 as webkitTransitionEnd26.0? as transitionend | 4.0 (2.0) | 10 | 10.5 as oTransitionEnd12 as otransitionend12.10 as transitionend | 3.2 as webkitTransitionEnd6.0? as transitionend |
함께 보기
- The
TransitionEventinterface and thetransitionendevent. - Transitions-related properties:
transition,transition-delay,transition-duration,transition-property,transition-timing-function
바로 가기
TransitionEventtransitionend- Transitions-related properties:
transition,transition-delay,transition-duration,transition-property,transition-timing-function
출처 - https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Using_CSS_transitions#.EB.B0.94.EB.A1.9C_.EA.B0.80.EA.B8.B0
'Development > CSS' 카테고리의 다른 글
| css - Background-color displaying incorrectly in IE8 and IE9 (0) | 2014.04.29 |
|---|---|
| css - placeholder color (0) | 2014.04.27 |
| css - 미디어쿼리(media query) @media (0) | 2013.11.19 |
| css - 넓이(width)와 높이(height) 자동 조정하기 (0) | 2013.10.29 |
| css - 글자 자동 줄바꿈 word-break white-space (0) | 2013.10.12 |
