[CSS] Visual Effect - Transition

-----------------------------------------------------------------------------------------------

 출처: http://j-anne.tistory.com/entry/CSS-Visual-Effect-Transition

-----------------------------------------------------------------------------------------------

 

 

webkit 계열의 브라우저에서 사용 가능

Transition: 애니메이션이 가능한 CSS 속성들을 변경하였을 경우에 발생하는 일종의 애니메이션이다.

                   일반적으로 속성값이 변경되는 즉시 새로운 property 값이 적용된다.

Transition을 적용하기에 앞서

1. transition을 이용할 요소를 선정한다. (propertym duration...)
2. 초기 속성값을 지정한다.
3. 속성값을 변경한다.

 

---

 

 

<< 속성 >>

 

TransitionProperty: transition 적용할 요소들

                            (width, height, opacity, webkit-translate, background-color ... 모든 CSS 속성)

 

TranstionDuration: Transition 진행 시간. 해당 시간 동안에 transition 발생 (1s(1초 동안 발생),

                           100ms(0.1초 동안 발생) ...)

 

TransitionDelay : 지연시간 지정. 작성된 시간 이후에 transition 발생 (1s (1초 후 발생),

                         100ms(0.1초 후 발생))

 

TransitionTimingFunction:

(예제는 크롬, 파이어폭스, 사파리에서만 효과를 확인 할 수 있다.)

• TransitionTimingFunction 예제는 webkit계열의 브라우저에서 확인이 가능하다. [출처] 

• ease : Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) 
  linear : Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
  ease-in : Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
  ease-out : Equivalent to cubic-bezier(0, 0, 0.58, 1.0)
  ease-in-out :Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
  

  혹은 직접 작성한 Timing Function

  
  

---

  

 

 

<< 예제 >>

/js

var domElem;
domElem.style.opacity = 0;
domElem.style.webkitTransitionProperty = 'opacity';
domElem.style.webkitTransitionDuration = '2s';

/js

var domElem;
domElem.style.webkitTranstion = 'opacity 2s 0';

/css

div{

opacity : 0;

-webkit-transition-property : opacity;

-webkit-transition-duration : 2s;

}

 

위의 세가지 코드는 모두 동일한 작업을 수행한다 (opacity 속성을 2초에 걸쳐서 투명하게 전환한다.)

 

 

---

 

 

<< 주의사항 >>

다중으로 여러개의 transition을 정의해야 하는 경우

반드시 property에 모든 요소를 정의한 후에 사용해야 한다.

>>duration 및 delay time 지정 시 여러개의 transition이 엉켜서 제대로 렌더링 되지 않는 경우가 발생한다.

var domElem;
domElem.style.webkitTransitionProperty = 'opacity, height, background-color';
domElem.style.webkitTransitionDuration = '2s, 1s, 3000ms';
domElem.style.webkitTransitionDelay ='0, 2s, 3s';
domElem.style.opacity = 1;
domElem.style['height'] = '100px';
domElem.style['background-color'] = 'red';

domElem이 지연시간 없이 2초간 opacity값이 1로 서서히 변경되며,
delay time인 2초후 (opacity transition이 끝난 시점과 동일) 높이가 100px로 변경.
delay time 3초를 적용해 height transition도 모두 끝난 3초 후 배경색이 빨간색으로 변경.
아래와 같은 방법으로도 정의 될 수 있다.

 

var domElem;
domElem.style.webkitTransition = 'opacity 2s 1, height 1s 100px, background-color 3s red';

 

 

출처: http://www.the-art-of-web.com/css/timing-function/

예제는 크롬, 파이어폭스, 사파리에서만 효과를 확인 할 수 있다. 

 

CSS: Transition Timing Functions

This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration andtransition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out.

The examples on this page will currently only work if you download a WebKit Nightly Build web browser now work in Safari 5, Chrome 6, Opera 10 and Firefox 4 Beta. They will not work in Internet Explorer.

1. Transition Timing Function Options

The transition-duration property is simple to understand. It defines the total duration of a transition from state A to state B, whether the transition involves scaling, distorting, rotating or modifying the style of an element.

The transition-timing-function is more difficult as it defines the rate at which the transition is carried out, which can involve speeding up and slowing down. It's all got something to do with Bézier curves as described here:

The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bézier function can be given for complete control of the transition function.

Rather than trying to work out what all that means, lets look at the keyword values for this property and how they affect a simple translation across the page. Move your mouse over the field below and the green boxes should all take off in a race across the page.

Each box undergoes the same transformation, but they all use different transition timing functions as shown by their labels. These are explained in more details below.

default »

linear »

ease-in »

ease-out »

ease-in-out »

cubic-bezier »

You can certainly see the effect of different transition timing functions on the animation. Of the named functions the ease-out box is fastest out of the blocks with ease-in lagging at the back. The defaultsetting seems to be a slightly accelerated version of ease-in-out. And all of them complete the trip at more or less the same 2 seconds.

The cubic-bezier option let's you specify your own curve by defining two points. The curves used for the above display are illustrated in the next section, apart from linear which I hope speaks for itself.

2. What are Bézier Curves?

The model used to generate different timing functions is based on cubic bézier curves which are described in the Surfin' Safari blog as follows:

To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.

In the same article they provide the values used to generate the 'named' options which allow us to illustrate the different curves. Below each graph you can see the name of the timing function and the coordinates of P1 and P2 used to plot the curve. For the last curve we've defined the coordinates ourselves using thecubic-bezier option:

 

 

 

 

The mechanics of Bézier curves are described in detail on Wikipedia as follows:

Four points P0, P1, P2 and P3 in the plane or in three-dimensional space define a cubic Bézier curve. The curve starts at P0 going toward P1 and arrives at P3 coming from the direction of P2.

There's a bit more to it than that of course as you can find out on that page, but what's important is that you see how the five graphics above match the movements of the five boxes in the previous section. The x-axis represents time and the y-axis the displacement (horizontal in this case).

These graphs have been generated using BezierText 1.0.1 (freeware) for OSX

3. Now available in Safari

As of Safari 3.1 (March 2008) these CSS properties are now recognised by default so they work for all up-to-date OSX users. So brace yourself - this could be the scariest addition to the web since animated backgrounds!

4. Image Fade and Special Effects using CSS

Here's an interesting use for CSS transitions - a dynamic fade from one photo to another. When you mouseover the photo of Hilary it will fade gracefully into a photo of Barak. Move the mouse away and the transition is repeated in reverse.

Here are the styles used for this effect (no JavaScript required):

 

Here's another interesting effect - a progress bar that counts off 5 seconds in half-second intervals. To start the animation, put your mouse over the line of boxes and wait.

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Again, this is achieved using no JavaScript and very little CSS. It's a bit of a hack, but surprisingly effective:

 

Note: to get these examples working in Opera you need to use the -o- prefix instead of (as well as)-webkit-. For Firefox the prefix will be -moz-.

So what do you think? Is this the 'Flash killer' that we've been waiting for?

5. Related Articles

• Animation Using CSS Transforms
• Transition Timing Functions
• 3D Transforms and Animations
• Bouncing Ball Animation