CSS3 전환 CSS 속성의 원래 값을 시간이 지남에 따라 새 값으로 애니메이션화하여 속성 값이 변경되는 속도를 제어할 수 있습니다. 대부분의 속성은 16밀리초 안에 값을 변경하므로 권장되는 기본 전환 시간은 200ms입니다.

속성 변경은 해당 의사 클래스에서 설명하는 특정 이벤트가 발생할 때 발생합니다. 가장 일반적으로 사용되는 의사 클래스는:hover 입니다. 이 의사 클래스는 작동하지 않습니다. 모바일 기기아이폰이나 안드로이드와 같은. 데스크톱 및 모바일 브라우저에서 작동하는 보편적인 솔루션은 JavaScript를 사용하여 이벤트를 처리하는 것입니다(예: 클릭 시 클래스 전환).

전환은 모든 요소와 :before 및 :after 의사 요소에 적용됩니다. 전환의 모든 속성을 설정하기 위해 전환 속성은 일반적으로 약식입니다.

CSS3 전환은 모든 속성과 해당 값에 적용되지 않을 수 있습니다. 자세한 목록은 페이지에서 확인할 수 있습니다.

요소 속성에서 부드러운 변경 만들기

브라우저 지원

즉: 10.0
파이어폭스: 16.0, 4.0 -모즈-
크롬: 26.0, 4.0 -웹킷-
원정 여행: 6.1, 3.1 -웹킷-
오페라: 12.1, 11.6 -o-
iOS 사파리: 7.1
오페라 미니: —
안드로이드 브라우저: 4.4, 4.1 -웹킷-
안드로이드용 크롬: 44

1. 속성 이름 transition-property

전환 효과가 적용될 CSS 속성의 이름을 포함합니다. 속성 값에는 단일 속성이나 쉼표로 구분된 속성 목록이 포함될 수 있습니다. 전환을 생성할 때 요소의 시작 및 종료 상태를 모두 사용할 수 있습니다. 속성은 상속되지 않습니다.

생성된 효과는 눈에 거슬리지 않아야 합니다. 모든 속성이 사용자 경험과 관련하여 시간이 지남에 따라 부드러운 변경이 필요한 것은 아닙니다. 예를 들어, 링크 위로 마우스를 가져갈 때 링크 색상이나 밑줄의 색상과 스타일이 즉시 변경되는 것을 보고 싶습니다. 따라서 실제로 주의를 기울여야 하는 속성에는 전환을 사용해야 합니다.

통사론

Div ( 너비: 100px; 전환 속성: 너비; ) div:hover ( 너비: 300px; )

2. 전환 기간 전환 기간

전환이 발생해야 하는 시간을 지정합니다. 다른 속성에 다른 전환 값이 있는 경우 쉼표로 구분됩니다. 전환 시간을 지정하지 않으면 속성 값을 변경할 때 애니메이션이 발생하지 않습니다. 속성은 상속되지 않습니다.

통사론

Div(전환 지속 시간: .2s; )

3. 전환 타이밍 기능

속성은 개체가 한 값에서 다른 값으로 전환되는 속도를 설명하는 시간 함수를 지정합니다. 요소의 배경색 및 위치와 같은 요소에 대해 둘 이상의 전환을 정의하는 경우 각 속성에 대해 다른 기능을 사용할 수 있습니다. 속성은 상속되지 않습니다.

전환 타이밍 기능
값:
쉬움	기본 기능인 전환은 천천히 시작하여 빠르게 가속하고 마지막에는 느려집니다. 큐빅 베지어(0.25,0.1,0.25,1) 와 일치합니다.
선의	전환은 속도 변동 없이 전체 시간 동안 균일하게 발생합니다. 큐빅 베지어(0,0,1,1) 와 일치합니다.
이즈 인	전환은 천천히 시작한 다음 끝에서 점차 빨라집니다. 큐빅 베지어(0.42,0,1,1) 와 일치합니다.
이즈아웃	전환은 빠르게 시작되고 마지막에는 천천히 느려집니다. 큐빅 베지어(0,0,0.58,1) 에 해당합니다.
출퇴근 용이	전환은 천천히 시작하여 천천히 끝납니다. 큐빅 베지어(0.42,0,0.58,1) 와 일치합니다.
큐빅베지어(x1, y1, x2, y2)	가속 곡선에 대해 0에서 1 사이의 값을 수동으로 설정할 수 있습니다. 모든 전환 경로를 구축할 수 있습니다.
초기의	속성 값을 기본값으로 설정합니다.
상속하다	부모 요소에서 속성 값을 상속합니다.

통사론

Div(전환 타이밍 기능: 선형; )

보다 사실적인 애니메이션을 위해 큐빅 베지어 기능을 사용하십시오.

쌀. 1. easings.net의 맞춤형 3차 베지어 함수

사용자 정의 이름	기능 값
이지인사인	3차 베지어(0.47, 0, 0.745, 0.715)
이즈아웃사인	입방 베지어(0.39, 0.575, 0.565, 1)
이지인아웃사인	3차 베지어(0.445, 0.05, 0.55, 0.95)
이지인쿼드	3차 베지어(0.55, 0.085, 0.68, 0.53)
easyOutQuad	3차 베지어(0.25, 0.46, 0.45, 0.94)
이지인아웃쿼드	3차 베지어(0.455, 0.03, 0.515, 0.955)
이지인큐빅	3차 베지어(0.55, 0.055, 0.675, 0.19)
easyOutCubic	3차 베지어(0.215, 0.61, 0.355, 1)
이지인아웃큐빅	3차 베지어(0.645, 0.045, 0.355, 1)
이지인쿼트	3차 베지어(0.895, 0.03, 0.685, 0.22)
이지아웃쿼트	3차 베지어(0.165, 0.84, 0.44, 1)
이지인아웃쿼트	입방 베지어(0.77, 0, 0.175, 1)
이지인퀸트	3차 베지어(0.755, 0.05, 0.855, 0.06)
easyOutQuint	입방 베지어(0.23, 1, 0.32, 1)
이지인아웃퀸트	3차 베지어(0.86, 0, 0.07, 1)
이지인엑스포	3차 베지어(0.95, 0.05, 0.795, 0.035)
이지아웃엑스포	3차 베지어(0.19, 1, 0.22, 1)
이지인아웃엑스포	큐빅 베지어(1, 0, 0, 1)
이지인서크	입방 베지어(0.6, 0.04, 0.98, 0.335)
이지아웃서클	3차 베지어(0.075, 0.82, 0.165, 1)
이지인아웃서클	3차 베지어(0.785, 0.135, 0.15, 0.86)
이지인백	3차 베지어(0.6, -0.28, 0.735, 0.045)
이즈아웃백	3차 베지어(0.175, 0.885, 0.32, 1.275)
이지인아웃백	3차 베지어(0.68, -0.55, 0.265, 1.55)

4. 전환 지연

속성 변경이 즉시 발생하지 않고 약간 지연되도록 하는 선택적 속성입니다. 상속되지 않습니다.

통사론

Div(전환 지연: .5초; )

5. 전환 요약

변경을 담당하는 모든 속성 모습요소, 단일 전환 속성으로 결합 가능
transition: transition-property transition-duration transition-timing-function transition-delay;

기본값을 사용하면 항목이

Div(전환: 1초;)

동등할 것이다

Div(전환: 모든 1은 0을 완화합니다.)

6. 여러 속성의 부드러운 전환

쉼표로 구분하여 나열하여 요소에 대해 여러 개의 연속 전환을 지정할 수 있습니다. 각 전환은 고유한 시간 함수로 형식화될 수 있습니다.

Div(전환: 배경 0.3초 용이함, 색상 0.2초 선형;)

Div(전환 속성: 높이, 너비, 배경색, 전환 지속 시간: 3초, 전환 타이밍 기능: 이즈인, 이즈, 선형; )

7. 다양한 속성에 대한 전환의 예

블록 위로 마우스를 가져가면 작동 중인 속성을 볼 수 있습니다.

CSS3는 우리에게 새로운 아름다움과 편의를 제공합니다. 어떤 경우에는 더 이상 플래시와 자바스크립트를 사용하여 비정상적인 효과를 만들 필요가 없습니다. CSS transition 속성은 그러한 상황의 대표적인 예입니다. 나는 모두가 :hover 의사 클래스를 알고 있다고 생각합니다. 그것으로, 변화 CSS 값마우스로 요소를 가리킬 때 요소의 속성. 예를 들어 검은색 글씨가 있는 회색 블록이 있었는데 그 위에 마우스를 올려놓으면 흰색 글씨로 검은색으로 변했습니다.

작성 방법은 다음과 같습니다.

Blok ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok:hover ( background-color:# 000000; 색상:#ffffff; )

다음은 다음과 같습니다.

나를 가리켜

블록 위에 마우스를 가져가면 배경색과 텍스트 색상 외에 너비도 변경할 수 있습니다. 이렇게 하려면 다음과 같이 CSS 코드를 작성하십시오.

Blok1(글꼴 크기:20픽셀; 배경 색상:#808080; 색상:#000000; 너비:325픽셀; 패딩:18픽셀 0; 커서:포인터; 텍스트 정렬:센터; ) .blok1:hover( 배경 색상:# 000000; 색상:#ffffff; 너비:355픽셀; )

이 경우 다음과 같이 표시됩니다.

나를 가리켜

모든 것이 괜찮지 만 보시다시피 속성은 동시에 값이 너무 갑자기 변경되어 그다지 좋아 보이지 않습니다. 무엇을 할까요? 매우 간단합니다. 속성을 사용하십시오. CSS 전환.

전환 속성 정보

transition 속성은 한 스타일에서 다른 스타일로 부드럽게 전환합니다. 예를 들어, 블록 위에 마우스를 가져가면 색상이 갑자기 변경되지 않고 일정 시간 동안 변경됩니다. 그건 그렇고, 러시아어로 번역 된 전환은 "전환"을 의미합니다. 속성에는 다음 항목이 있습니다.

Div(전환:색상 1s 1s 선형; )

당연히 표시된 값 대신 다른 값을 사용할 수 있습니다. 대부분의 브라우저는 여전히 기본 형식에서 이 속성을 인식하지 못하므로 접두사를 사용해야 합니다.

Div ( transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; )

예에서 레코드의 짧은 버전이 표시되었으며 자세한 형식은 다음과 같습니다.

Div ( transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition -delay:1s, -moz-transition-timing-function:linear, -webkit-transition-property:color, -webkit-transition-duration:1s, -webkit-transition-delay:1s, -webkit-transition-timing- 기능:선형, -o-전환 속성:색상, -o-전환-지속 시간:1초, -o-전환-지연:1초, -o-전환-타이밍 기능:선형, )

에 전환 속성전환 작업이 적용될 속성을 설정합니다. 예: 색상, 배경색, 너비, 높이, 왼쪽, 불투명도, 가시성 및 기타 여러 가지. 여러 속성을 쉼표로 구분하여 지정할 수 있습니다. 가능한 모든 속성에 전환을 한 번에 적용하려면 transition-property를 all로 설정하십시오. 에 전환 기간전환이 수행되는 시간을 나타냅니다. 전환 지연전환이 시작되는 시간입니다. transition-timing-function은 전환 유형을 지정합니다. 이 속성에 대해 더 자세히 살펴보겠습니다.

전환 타이밍 기능에 대해 자세히 알아보기

재산 전환 타이밍 기능전환 중에 중간 값이 어떻게 변경되는지, 즉 transition-duration 속성에 지정된 시간 동안 전환 속도가 어떻게 변경되는지를 결정합니다. 예를 들어, 전환은 빠르게 시작되지만 결국 느려지거나 전체 시간 동안 속도가 변경되지 않을 수 있습니다. transition-timing-function은 다음과 같은 값을 가질 수 있습니다:

• linear - 전환 속도는 처음부터 끝까지 변경되지 않습니다. 3차 베지어(0,0,1,1)와 동일합니다.
• 용이성 - 천천히 시작한 다음 끝에서 속도를 높이고 속도를 줄입니다. 3차 베지어(0.25,0.1,0.25,1)와 동일합니다.
• easy-in - 느린 시작. 3차 베지어(0.42,0,1,1)와 동일합니다.
• easy-out - 마지막에 속도를 줄입니다. 3차 베지어(0,0,0.58,1)와 동일합니다.
• easy-in-out - 느린 시작과 끝. 3차 베지어(0.42,0,0.58,1)와 동일합니다.
• 큐빅 베지어(n,n,n,n) - 0에서 1 사이의 값을 설정할 수 있습니다.

마우스로 다음 블록 위로 마우스를 이동하고 특정 기능으로 전환이 수행되는 방법을 직접 확인하십시오.

보다시피 transition-timing-function 속성의 값에 따라 완전히 다른 방식으로 전환이 수행될 수 있습니다. 예를 들어 transition-duration이 작은 임시 값으로 설정되거나 효과가 수행되는 블록의 크기가 작은 경우와 같이 이 차이가 그다지 눈에 띄지 않을 때도 있습니다.

transition 속성 사용 예

transition 속성을 올바르게 사용하는 방법을 더 쉽게 이해할 수 있도록 몇 가지 예가 있습니다. 아마도 가장 간단한 것부터 시작하겠습니다. 게시물의 맨 처음에 블록 위에 마우스를 가져가면 너비와 색상이 변경되는 블록을 기억하십니까? 이제 transition 속성을 사용하여 동일한 작업을 수행해 보겠습니다.
실시예 1

Primer_1(글꼴 크기:20px; 배경색:#808080; 색상:#000000; 너비:325px; 패딩:18px 0; 커서:포인터; 텍스트 정렬:센터; 전환: 모두 1초 선형; -moz-transition: 모든 1s 선형; -webkit-transition:모든 1s 선형; -o-transition:모든 1s 선형; ) .primer_1:hover ( background-color:#000000; color:#ffffff; 너비:355px; )

나를 가리켜

사용된 예 선형 함수, 나중에 포스트에서 사용하겠습니다. 물론, 당신은 절대적으로 무엇이든 사용할 수 있습니다. transition-property는 all로 설정되었습니다. 즉 배경색, 텍스트 색상 및 너비와 같은 가능한 모든 속성이 동일한 시간에 동일한 기능을 사용하여 값을 변경했음을 의미합니다. 각 속성을 다르게 변경하려면 쉼표로 구분하여 작성해야 합니다. 다른 값. 이와 같이:

Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s 선형, 색상 1s 1s 인아웃, 너비 1s 2s 이즈; -moz-transition:background-color 1s 선형, 색상 1s 1s 인-아웃, 너비 1s 2s 이즈; -webkit-transition:background-color 1s 선형, 색상 1s 1s -o-transition:background-color 1s 선형, 색상 1s 1s easy-in-out, 너비 1s 2s easy; ) .primer_1_1:hover ( background-color:#000000; color :#ffffff;width:355px; )

나를 가리켜

이 경우 모든 속성은 배경색으로 시작하여 너비로 끝나는 값을 차례로 변경했습니다. 각 속성에는 고유한 기능이 있습니다.
실시예 2
우리는 색상과 크기를 알아 냈습니다. 이제 움직임이 사라지는 블록을 만들어 봅시다.

Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover ( opacity:0; margin-left:50px; )

나를 가리켜

도움으로 불투명도 속성왼쪽 여백 블록이 이동하고 2초 이내에 사라집니다.
실시예 3
또 다른 간단한 예입니다. 이번에는 텍스트에 흰색 그림자가 있습니다. 이 경우에는 그림자보다 하이라이트처럼 보이지만 이를 속성이라고 합니다.

Primer_3 (글꼴 크기:20px; 배경색:#808080; 색상:#000000; 너비:325픽셀; 패딩:18px 0; 커서:포인터; 텍스트 정렬: 센터; 전환: 텍스트 그림자 1초 선형; -moz- transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover ( text-shadow:0 0 15px #ffffff; )

나를 가리켜

우리는 이것을 text-shadow 속성을 사용하여 구현했습니다.
실시예 4
작업을 조금 복잡하게 하고 블록을 회전시키도록 합시다.

Primer_4 (글꼴 크기:20픽셀, 배경 색상:#808080, 색상:#000000, 너비:325픽셀, 패딩:18픽셀 0, 커서:포인터, 텍스트 정렬: 센터, 전환: 1.5초 선형 변환, -moz-transition :-moz-transform 1.5s 0 linear, -webkit-transition:-webkit-transform 1.5s linear, -o-transition:-o-transform 1.5s linear, ) .primer_4:hover ( transform: rotate(360deg), - moz-transform: 회전(360deg); -webkit-transform: 회전(360deg); -o-transform: 회전(360deg); )

나를 가리켜

동의합니다. 보기에 좋고 이것이 CSS로만 수행되었다는 것을 즉시 짐작조차 하지 못할 것입니다. 그런데 이 예에서는 또 다른 새로운 변형 속성이 사용되었습니다. 많은 브라우저는 공급업체 접두사로만 읽습니다. transition 속성 값에도 지정해야 합니다. 변환 속성에 대해 자세히 알아보려면 구독하십시오. 곧 다른 많은 속성뿐만 아니라 별도의 기사가 이에 전념할 것입니다.
실시예 5
그런데 CSS 전환 속성은 :active 의사 클래스와 함께 잘 작동합니다. 차단 이 예마우스 커서를 클릭하고 유지하면 증가해야 합니다. 점검 해보자?

Primer_5 (글꼴 크기:20픽셀; 배경 색상:#808080; 색상:#000000; 너비:325픽셀; 패딩 상단:18픽셀; 높이:38픽셀; 커서:포인터; 텍스트 정렬: 센터; 전환: 모두 2초 선형; -moz-transition:모든 2s 0 선형; -webkit-transition:all 2s 선형; -o-transition:all 2s 선형; ) .primer_5:active( 너비:375px; 높이:85px; )

길게 눌러

이 예제를 구현하려면 :active 의사 클래스를 사용하여 블록의 너비와 높이 값만 늘리면 됩니다.

실제로 CSS transition 속성을 사용하는 방법은 많이 있으며 앞으로 더 많이 있을 것이라고 확신합니다. 가장 많이만 가져왔어요 간단한 예행동의 전환을 보여줍니다. 그건 그렇고, 내 블로그의 링크는 도움을 받아 마우스로 마우스를 가져가면 색상이 바뀝니다. 회색 직사각형으로 당신에게 꽤 지겹다고 생각하지만, 내가 원하는 모든 것을 완벽하게 보여주었습니다. 다른 속성 및 그래픽과 결합하여 전환은 꽤 멋진 작업을 수행할 수 있습니다. 노력하다!

CSS 전환 속성을 사용하면 단일 선언에서 전환 효과(요소의 두 상태 간 전환)의 모든 속성을 설정할 수 있습니다.

이 속성은 다음 속성의 약어입니다(목록은 값이 지정된 순서를 따릅니다).

브라우저 지원

재산			오페라		아이 익스플로러	가장자리
이행	26.0 4.0 -웹킷-	16.0 4.0 -모즈-	12.1 10.5 -영형-	6.1 3.1 -웹킷-	10.0	12.0

CSS 구문:

이행: "속성 지속 시간 타이밍 기능 지연 | 초기 | 상속"; /* 하나의 선언에서 각 속성에 대해 별도로 전환 효과를 나열할 수 있습니다. */ /* 구문은 다음과 같습니다. property | 기간 | 타이밍 기능 | 지연,..., 속성 | 기간 | 타이밍 기능 | delay */ /* 모든 값이 허용되는 것은 아니지만 예제 상단에 표시된 순서를 따라야 합니다. */ /* 지연만 지정하려면 기간(0s)도 지정해야 합니다. */ /* 즉 . 4초의 지연을 지정하려면 다음 전환을 작성해야 합니다. 0s 4s; */이행: 너비 2s는 100ms, 높이 1s는 선형 2s, 배경 0s는 4s; /* 페이지 하단의 예시 참조 */

자바스크립트 구문:

Object.style.transition = "너비 3s 이즈아웃 2s"

속성 값

의미	설명
전환 속성	전환 효과를 사용할 CSS 속성의 이름을 지정합니다. 기본값은 모두입니다.
전환 기간	전환 효과에 걸리는 시간을 초 또는 밀리초로 지정합니다.
전환 타이밍 기능	중간 값을 계산하는 방법을 설명하는 데 사용 CSS 속성, 수학적 함수(입방 베지어 곡선)를 사용하는 동안 전환 효과의 영향을 받습니다. 이것은 본질적으로 전환 효과가 지속되는 동안 전환 속도가 변경될 수 있도록 "가속" 곡선을 생성할 수 있도록 합니다. 기본값은 용이함입니다.
전환 지연	전환 효과가 시작되는 시간을 지정합니다(효과 시작에 대한 지연 역할을 함). 기본값은 0초입니다.
	속성을 기본값으로 설정합니다.
	값이 상위 요소에서 상속되도록 지정합니다.

CSS 버전

CSS3

상속

아니.

생기 있는

아니.

사용 예

속성 선택기(지정된 값 포함) 및 전환 일반 속성을 사용하는 CSS의 슬라이딩 검색 예:

검색:

전환은 마우스 커서로 요소를 가리킬 때 요소의 속성이 부드럽게 변경되는 것입니다. :hover 의사 클래스를 사용하면 변경이 즉시 이루어지며 전환을 사용하면 전환 기간과 방법을 설정할 수 있습니다.

간단한 예부터 시작하겠습니다. 몇 장의 사진이 있으며 각 사진은 커서를 그 위에 놓으면 작은 각도로 회전해야 합니다(예제 1).

예 1: 전환 적용

커서를 이미지 위로 이동하자마자 왼쪽으로 15도 부드럽게 회전합니다(그림 1).

쌀. 1. 부드러운 이미지 회전

:hover 의 스타일에서 hover 시 요소에 대한 원하는 변경 사항을 설정합니다. 전환 자체는 transition 속성을 통해 요소의 스타일에 추가됩니다. 하나 이상의 속성, 애니메이션 지속 시간, 시간 함수, 애니메이션 전의 시간 지연 등 4개의 매개변수가 있습니다.

속성

기본적으로 :hover 안에 지정된 모든 속성은 애니메이션됩니다. 때때로 일부 속성은 애니메이션이 필요하고 일부는 그렇지 않습니다. 이 경우 원하는 모든 속성은 transition 에서 쉼표로 구분되어야 합니다.

전환: 변환, 테두리 1;

애니메이션 지속 시간

움직임이 지속되는 시간입니다. 초(1초, 0.5초) 및 밀리초(100ms)로 지정됩니다.

애니메이션 지연

움직임이 즉시 시작될 필요는 없으며 처음에 약간의 지연을 추가하는 것이 허용되며 지정된 시간이 끝나면 애니메이션이 즉시 시작됩니다.

시간 기능

애니메이션은 다양한 방식으로 발생할 수 있습니다. 예를 들어, 움직임의 시작 부분에서 천천히 시작하고 끝 부분에서 가속하거나 그 반대의 경우도 마찬가지입니다. 많은 옵션이 있으며 모든 종류의 흥미로운 효과. 애니메이션 속도는 시간과 움직임을 연결하는 특수 기능에 의해 제어됩니다. 다음은 차트에 표시되는 방식입니다(그림 2).

쌀. 2. 시간 함수의 종류

시작점의 좌표는 0.0, 0.0, 끝점은 1.0, 1.0이며 세로축의 기능은 위 또는 아래로 이러한 값을 초과할 수 있습니다. 결과적으로 요소가 먼저 반대 방향으로 이동한 다음 원하는 방향으로 이동하는 것처럼 보입니다. 따라서 반동 또는 관성의 효과를 만들 수 있습니다. 다음은 가장 인기 있는 시간 함수 값입니다.

• 용이함 - 애니메이션이 천천히 시작된 다음 움직임이 끝날 때까지 속도가 빨라졌다가 다시 느려집니다.
• easy-in - 애니메이션은 천천히 시작하여 끝까지 속도를 높입니다.
• easy-out - 애니메이션이 빠르게 시작되고 끝으로 갈수록 느려집니다.
• easy-in-out - 애니메이션이 천천히 시작되고 끝납니다.
• 선형 - 처음부터 끝까지 동일한 속도.

예 2에서 전환은 마우스 커서가 패널 위에 있을 때 화면의 왼쪽 가장자리 뒤에서 패널을 부드럽게 밀어내는 데 사용됩니다.

예 2: 시간 함수 사용

이 예제에는 많은 스타일 속성이 있지만 원하는 디자인을 만들기 위한 것일 뿐입니다. 마우스 오버 애니메이션은 두 가지 속성으로 수행됩니다. 전환은 애니메이션 매개변수를 설정하고 왼쪽은 시간이 지남에 따라 값이 부드럽게 변하는 속성입니다(이 경우 1초 이내). 처음에는 왼쪽이 -320px이고 대부분의 패널이 브라우저의 왼쪽 가장자리 뒤에 숨겨져 있고 작은 부분만 보입니다. 그런 다음 왼쪽이 0이 되어 전체 패널이 표시됩니다.

스타일에서는 속성과 효과가 다른 여러 전환을 한 번에 추가할 수 있으므로 전환을 다양화할 수 있습니다. 예제 3은 배경색, 테두리, 레이블을 부드럽게 변경하는 버튼을 만드는 방법을 보여줍니다. 이 경우 텍스트의 애니메이션은 다른 부분의 애니메이션과 다릅니다.