애니메이션 CSS 예제 및 기성 코드. 9가지 간단한 CSS3 애니메이션 예 두 요소의 애니메이션 런던 바퀴

마지막 업데이트: 2016년 11월 6일

애니메이션은 요소의 스타일을 변경할 수 있는 좋은 기회를 제공합니다. 전환에는 전환이 시작되기 전에 요소가 갖는 초기 값과 전환이 완료된 후 설정되는 최종 값이 포함된 속성 집합이 있습니다. 반면 애니메이션 중에는 초기 값과 최종 값의 두 가지 값 세트뿐만 아니라 많은 중간 값 세트도 가질 수 있습니다.

애니메이션은 키 프레임의 순차적 변경에 의존합니다. 각 키프레임은 애니메이션을 적용할 속성에 대한 하나의 값 세트를 정의합니다. 그리고 이러한 키 프레임의 순차적인 변화가 실제로 애니메이션을 표현하게 됩니다.

기본적으로 전환은 동일한 모델을 사용합니다. 두 개의 키 프레임도 암시적으로 정의됩니다(시작과 끝). 전환 자체는 시작에서 끝 키 프레임까지의 전환을 나타냅니다. 이 경우 애니메이션과의 유일한 차이점은 애니메이션에 대해 많은 중간 키 프레임을 정의할 수 있다는 것입니다.

일반적으로 CSS3의 키 프레임 선언은 다음과 같은 형식을 갖습니다.

@keyframes animation_name ( from ( /* 초기 CSS 속성 값 ​​*/ ) ~ ( /* 최종 CSS 속성 값 ​​*/ ) )

@keyframes 키워드 뒤에는 애니메이션 이름이 옵니다. 그러면 최소한 두 개의 키 프레임이 중괄호 안에 정의됩니다. from 키워드 뒤의 블록은 시작 키 프레임을 선언하고, 블록의 to 키워드 뒤에는 종료 키 프레임이 정의됩니다. 각 키프레임 내에는 일반 스타일을 만드는 방법과 유사하게 하나 이상의 CSS 속성이 정의됩니다.

예를 들어 요소의 배경색에 대한 애니메이션을 정의해 보겠습니다.

이 경우 애니메이션을 backgroundColorAnimation이라고 합니다. 애니메이션의 이름은 무엇이든 가질 수 있습니다.

이 애니메이션은 빨간색 배경색에서 파란색 배경색으로의 전환을 제공합니다. 또한 애니메이션이 완료된 후 div 요소에 정의된 색상이 설정됩니다.

요소에 애니메이션을 첨부하려면 해당 스타일에 animation-name 속성을 사용하세요. 이 속성의 값은 적용할 애니메이션의 이름입니다.

또한 animation-duration 속성을 사용하여 애니메이션 시간을 초 또는 밀리초 단위로 설정해야 합니다. 이 경우 애니메이션 시간은 2초입니다.

이 정의를 사용하면 페이지가 로드된 직후 애니메이션이 시작됩니다. 그러나 사용자 작업에 따라 애니메이션을 트리거할 수도 있습니다. 예를 들어 :hover 의사 클래스에 대한 스타일을 정의하면 마우스 포인터가 요소 위에 있을 때 애니메이션이 시작되도록 지정할 수 있습니다.

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: # ccc; ) div:hover( 애니메이션 이름: backgroundColorAnimation; 애니메이션 지속 시간: 2s; )

많은 키 프레임

위에서 언급했듯이 애니메이션에서는 두 개의 표준 키 프레임 외에도 많은 중간 키 프레임을 사용할 수 있습니다. 트윈 프레임을 결정하려면 트윈 프레임을 사용해야 하는 애니메이션 비율이 적용됩니다.

@keyframes backgroundColorAnimation ( from ( 배경색: 빨간색; ) 25%( 배경색: 노란색; ) 50%( 배경색: 녹색; ) 75%( 배경색: 파란색; ) ~ ( 배경색: 보라색 ; ) )

이 경우 애니메이션은 빨간색으로 시작됩니다. 애니메이션 시간의 25%가 지나면 색상이 노란색으로 바뀌고, 25%가 더 지나면 녹색으로 바뀌는 식입니다.

하나의 키 프레임에서 여러 속성에 동시에 애니메이션을 적용할 수도 있습니다.

@keyframes backgroundColorAnimation ( from ( background-color: red; opacity: 0.2; ) ~ ( background-color: blue; opacity: 0.9; ) )

여러 개의 별도 애니메이션을 정의할 수도 있지만 함께 적용할 수도 있습니다.

@keyframes backgroundColorAnimation ( from ( background-color: red; ) ~ ( background-color: blue; ) ) @keyframes opacityAnimation ( from ( opacity: 0.2; ) ~ ( opacity: 0.9; ) ) div( 너비: 100px; 높이: 100px; 여백: 40px 30px; 테두리: 1px 단색 #333; 배경색: #ccc; 애니메이션 이름: backgroundColorAnimation, opacityAnimation; 애니메이션 지속 시간: 2초, 3초; )

animation-name 속성 값은 쉼표로 구분된 애니메이션을 나열하고 animation-duration 속성은 이러한 애니메이션의 시간도 쉼표로 구분하여 설정합니다. 애니메이션 이름과 시간은 위치에 따라 일치합니다. 즉, opacityAnimation은 3초 동안 지속됩니다.

애니메이션 완성하기

일반적으로 animation-duration 속성에 지정된 시간 간격이 완료되면 애니메이션이 종료됩니다. 그러나 추가 속성을 사용하면 이 동작을 재정의할 수 있습니다.

따라서 animation-iteration-count 속성은 애니메이션이 반복되는 횟수를 결정합니다. 예를 들어 애니메이션이 연속으로 3회 반복됩니다.

애니메이션 반복 횟수: 3;

애니메이션을 무한 횟수 실행하려면 이 속성을 unlimited 로 설정합니다.

애니메이션 반복 횟수: 무한;

반복하면 애니메이션이 시작 키프레임부터 다시 시작됩니다. 하지만 animation-direction: alter; 속성을 사용하면 반복할 때 애니메이션의 반대 방향. 즉, 종료 키프레임에서 시작한 다음 시작 프레임으로 전환됩니다.

애니메이션 이름: backgroundColorAnimation, opacityAnimation; 애니메이션 지속 시간: 2초, 2초; 애니메이션 반복 횟수: 3; 애니메이션 방향: 대체;

애니메이션이 끝나면 브라우저는 애니메이션 요소를 애니메이션이 적용되기 전의 스타일로 설정합니다. 그러나 animation-fill-mode:forwards 속성을 사용하면 애니메이션 속성의 최종 값을 마지막 프레임에 있었던 값으로 정확하게 설정할 수 있습니다.

애니메이션 이름: backgroundColorAnimation; 애니메이션 지속 시간: 2초; 애니메이션 반복 횟수: 3; 애니메이션 방향: 대체; 애니메이션 채우기 모드: 앞으로;

애니메이션 지연

animation-delay 속성을 사용하면 애니메이션 지연 시간을 정의할 수 있습니다.

애니메이션 이름: backgroundColorAnimation; 애니메이션 지속 시간: 5초; 애니메이션 지연: 1초; /* 1초 지연 */

부드러운 애니메이션 기능

전환과 마찬가지로 애니메이션에도 동일한 스무딩 기능을 적용할 수 있습니다.

선형 : 선형 평활도 함수, 시간이 지남에 따라 특성이 균일하게 변경됩니다.

easy : 애니메이션 속도가 중간으로 갈수록 빨라지고 끝으로 갈수록 느려지는 완화 기능으로 보다 자연스러운 변화를 제공합니다.

easy-in : 처음에만 가속되는 easy-in 함수

easy-out : 처음에만 가속되는 easy-out 기능

easy-in-out : 애니메이션이 중간으로 갈수록 속도가 빨라지고 끝으로 갈수록 느려지므로 보다 자연스러운 변형을 제공하는이지 인 기능입니다.

큐빅-베지어(cubic-bezier) : 애니메이션에 큐빅 베지어(cubic Bezier) 기능이 사용됩니다.

부드러움 기능을 설정하려면 animation-timing-function 속성을 사용하세요.

@keyframes backgroundColorAnimation ( from ( background-color: red; ) ~ ( background-color: blue; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; animation-name: backgroundColorAnimation ; 애니메이션 지속 시간: 3초; 애니메이션 타이밍 기능: easy-in-out; )

애니메이션 속성

애니메이션 속성은 위에서 설명한 속성을 정의하는 간단한 방법입니다.

애니메이션: 애니메이션 이름 애니메이션 지속 시간 애니메이션 타이밍 기능 애니메이션 반복 횟수 애니메이션 방향 애니메이션 지연 애니메이션 채우기 모드

애니메이션의 이름과 시간을 제공하는 처음 두 개의 매개변수가 필요합니다. 나머지 값은 선택 사항입니다.

다음 속성 집합을 살펴보겠습니다.

애니메이션 이름: backgroundColorAnimation; 애니메이션 지속 시간: 5초; 애니메이션 타이밍 기능: easy-in-out; 애니메이션 반복 횟수: 3; 애니메이션 방향: 대체; 애니메이션 지연: 1초; 애니메이션 채우기 모드: 앞으로;

이 세트는 다음 애니메이션 정의와 동일합니다.

애니메이션: backgroundColorAnimation 5s easy-in-out 3 대체 1s 앞으로;

애니메이션으로 배너 만들기

애니메이션의 예로 간단한 애니메이션 배너를 만들어 보겠습니다.

여기서는 세 가지 애니메이션이 동시에 실행됩니다. "배너" 애니메이션은 배너의 배경색을 변경하고, text1 및 text2 애니메이션은 투명도 설정을 사용하여 텍스트를 표시하거나 숨깁니다. 첫 번째 텍스트가 표시되면 두 번째 텍스트는 표시되지 않으며 그 반대의 경우도 마찬가지입니다. 따라서 배너에 있는 텍스트의 애니메이션을 얻습니다.

CSS3 애니메이션사이트에 역동성을 부여합니다. 웹페이지에 생기를 불어넣어 사용자 경험을 향상시킵니다. CSS3 전환과 달리 애니메이션 생성은 키프레임을 기반으로 하므로 지정된 시간 동안 효과를 자동으로 재생 및 반복할 수 있을 뿐만 아니라 루프 내에서 애니메이션을 중지할 수도 있습니다.

CSS3 애니메이션은 거의 모든 HTML 요소뿐만 아니라:before 및:after 의사 요소에 사용할 수 있습니다. 애니메이션 속성 목록이 페이지에 제공됩니다. 애니메이션을 생성할 때 일부 속성을 변경하려면 많은 리소스가 필요하므로 발생할 수 있는 성능 문제를 잊지 마십시오.

CSS 애니메이션 소개

브라우저 지원

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

1. 키프레임

키프레임은 애니메이션의 다양한 지점에서 애니메이션 속성 값을 지정하는 데 사용됩니다. 키프레임은 하나의 애니메이션 주기 동작을 정의합니다. 애니메이션은 0번 이상 반복될 수 있습니다.

키프레임은 다음과 같이 정의된 @keyframes 규칙을 사용하여 지정됩니다.

@keyframes 애니메이션 이름(규칙 목록)

애니메이션 제작은 설치부터 시작됩니다 키 프레임@keyframes 규칙. 프레임은 어떤 단계에서 어떤 속성이 애니메이션화될지 결정합니다. 각 프레임에는 하나 이상의 속성 및 값 쌍에 대한 하나 이상의 선언 블록이 포함될 수 있습니다. @keyframes 규칙에는 규칙과 요소의 선언 블록을 연결하는 요소의 애니메이션 이름이 포함됩니다.

@keyframes 그림자( (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) ~ (text-shadow: 0 0 3px black;) )

키프레임은 from 및 to 키워드(0% 및 100% 값에 해당)를 사용하거나 원하는 만큼 지정할 수 있는 백분율을 사용하여 생성됩니다. 키워드와 백분율 포인트를 결합할 수도 있습니다. 프레임의 속성과 값이 동일한 경우 하나의 선언으로 결합할 수 있습니다.

@keyframes move ( from, to ( 위쪽: 0; 왼쪽: 0; ) 25%, 75% (상단: 100%;) 50% (상단: 50%;) )

0% 또는 100% 프레임이 지정되지 않은 경우 사용자의 브라우저는 애니메이션 속성의 계산된(원래 설정된) 값을 사용하여 해당 프레임을 생성합니다.

동일한 이름으로 여러 개의 @keyframes 규칙이 정의된 경우 문서 순서의 마지막 규칙이 실행되고 이전 규칙은 모두 무시됩니다.

@keyframes 규칙이 선언되면 애니메이션 속성에서 이를 참조할 수 있습니다.

H1(글꼴 크기: 3.5em; 색상: darkmagenta; 애니메이션: 섀도우 2s 무한이지아웃; )

브라우저의 결과를 예측할 수 없으므로 숫자가 아닌 값에 애니메이션을 적용하는 것은 권장되지 않습니다(드물게 예외 있음). 또한 속성 값 color: pink 및 color: #ffffff , width: auto 및 width: 100px 또는 border-radius: 0 및 border-와 같이 중간점이 없는 속성 값에 대해 키프레임을 생성해서는 안 됩니다. radius: 50%(이 경우 border-radius: 0%를 지정하는 것이 정확합니다).

1.1. 키 프레임의 타이밍 기능

키프레임 스타일 규칙은 애니메이션이 다음 키프레임으로 이동할 때 사용해야 하는 임시 기능을 선언할 수도 있습니다.

예

@keyframes 바운스( from ( top: 100px; animation-timing-function: easy-out; ) 25% ( top: 50px; animation-timing-function: easy-in; ) 50% ( top: 100px; animation-timing- 기능: 이즈 아웃; ) 75%( 상단: 75px; 애니메이션 타이밍 기능: 이즈 인; ) ~ ( 상단: 100px; ) )

"bounce"라는 애니메이션에 대해 5개의 키프레임이 지정됩니다. 첫 번째와 두 번째 키프레임 사이(즉, 0%에서 25% 사이)에는 여유 기능이 사용됩니다. 두 번째와 세 번째 키프레임 사이(즉, 25%~50%)에는 부드러운 가속 기능이 사용됩니다. 등등. 요소는 페이지에서 50px 위로 이동하고, 가장 높은 지점에 도달하면 속도가 느려지고, 100px로 떨어지면 속도가 빨라집니다. 애니메이션의 후반부도 비슷하게 동작하지만 요소가 페이지 위로 25px만 이동합니다.

~ 또는 100% 키프레임에 지정된 타이밍 기능은 무시됩니다.

2. 애니메이션 이름 : animation-name 속성

animation-name 속성은 요소에 적용되는 애니메이션 목록을 지정합니다. 각 이름은 애니메이션의 속성 값을 제공하는 규칙에서 키프레임을 선택하는 데 사용됩니다. 이름이 규칙의 키프레임과 일치하지 않거나 애니메이션을 적용할 속성이 없거나 애니메이션 이름이 없으면 애니메이션이 실행되지 않습니다.

여러 애니메이션이 동일한 속성을 변경하려고 하면 이름 목록 끝에 가장 가까운 애니메이션이 실행됩니다.

애니메이션 이름은 대소문자를 구분하며 none 키워드는 허용되지 않습니다. 애니메이션의 본질을 반영한 이름을 사용하는 것이 좋으며, 하이픈 - 또는 밑줄 문자 _ 와 함께 나열된 단어를 하나 이상 사용할 수 있습니다.

재산은 상속되지 않습니다.

통사론

애니메이션 이름: 없음; 애니메이션 이름: test-01; 애니메이션 이름: -sliding; 애니메이션 이름: 수직으로 이동; 애니메이션 이름: test2; 애니메이션 이름: test3, move4; 애니메이션 이름: 초기; 애니메이션 이름: 상속;

3. 애니메이션 기간: animation-duration 속성

animation-duration 속성은 하나의 애니메이션 주기의 지속 시간을 지정합니다. 초 s 또는 밀리초 ms 단위로 지정됩니다. 요소에 둘 이상의 애니메이션이 지정된 경우 쉼표로 구분된 값을 나열하여 각각에 대해 서로 다른 시간을 설정할 수 있습니다.

재산은 상속되지 않습니다.

통사론

애니메이션 지속 시간: 0.5초; 애니메이션 지속 시간: 200ms; 애니메이션 지속 시간: 2초, 10초; 애니메이션 지속 시간: 15초, 30초, 200ms;

4. 타이밍 함수: animation-timing-function 속성

animation-timing-function 속성은 각 키프레임 쌍 사이에서 애니메이션이 진행되는 방식을 설명합니다. 애니메이션 지연 중에는 타이밍 기능이 적용되지 않습니다.

재산은 상속되지 않습니다.

통사론

애니메이션 타이밍 기능: 용이성; 애니메이션 타이밍 기능: easy-in; 애니메이션 타이밍 기능: 완화; 애니메이션 타이밍 기능: easy-in-out; 애니메이션 타이밍 기능: 선형; 애니메이션 타이밍 기능: 단계 시작; 애니메이션 타이밍 기능: 단계 끝; 애니메이션 타이밍 기능: 입방 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: 단계(4, 끝); 애니메이션 타이밍 기능: 용이함, 단계 시작, 3차 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: 초기; 애니메이션 타이밍 기능: 상속;

단계별 애니메이션을 사용하여 인쇄되는 텍스트나 로딩 표시 등의 흥미로운 효과를 만들 수 있습니다.

5. 애니메이션 반복: animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션 루프가 재생되는 횟수를 지정합니다. 시작 값이 1이면 애니메이션이 처음부터 끝까지 한 번 재생된다는 의미입니다. 이 속성은 애니메이션 방향 속성의 대체 값과 함께 사용되는 경우가 많으며, 이로 인해 애니메이션이 대체 루프에서 역순으로 재생됩니다.

재산은 상속되지 않습니다.

통사론

애니메이션 반복 횟수: 무한; 애니메이션 반복 횟수: 3; 애니메이션 반복 횟수: 2.5; 애니메이션 반복 횟수: 2, 0, 무한;

6. 애니메이션 방향 : animation-direction 속성

animation-direction 속성은 애니메이션이 일부 또는 전체 루프에서 역순으로 재생되어야 하는지 여부를 결정합니다. 애니메이션이 역순으로 재생되면 타이밍 기능도 반전됩니다. 예를 들어, 역순으로 재생되면 easy-in 함수는easing-out처럼 동작합니다.

재산은 상속되지 않습니다.

애니메이션 루프 반복이 짝수인지 홀수인지 확인하려면 반복 횟수가 1부터 시작됩니다.

통사론

애니메이션 방향: 정상; 애니메이션 방향: 역방향; 애니메이션 방향: 대체; 애니메이션 방향: 대체-역방향; 애니메이션 방향: 정상, 역방향; 애니메이션 방향: 대체, 역방향, 일반; 애니메이션 방향: 초기; 애니메이션 방향: 상속;

7. 애니메이션 재생: animation-play-state 속성

animation-play-state 속성은 애니메이션이 시작될지 일시정지할지를 결정합니다. JavaScript 스크립트에서 이 속성을 사용하면 루프 내에서 애니메이션을 중지할 수 있습니다. 객체 위로 마우스를 가져가면 애니메이션을 중지할 수도 있습니다(state:hover ).

재산은 상속되지 않습니다.

통사론

애니메이션 재생 상태: 실행 중; 애니메이션 재생 상태: 일시 중지됨; 애니메이션 재생 상태: 일시 중지됨, 실행 중, 실행 중; 애니메이션 재생 상태: 초기; 애니메이션 재생 상태: 상속;

8. 애니메이션 지연: animation-delay 속성

animation-delay 속성은 애니메이션이 시작되는 시기를 결정합니다. 초 s 또는 밀리초 ms 단위로 지정됩니다.

재산은 상속되지 않습니다.

통사론

애니메이션 지연: 5초; 애니메이션 지연: 3초, 10ms;

9. 애니메이션 재생 전후의 요소 상태 : animation-fill-mode 속성

animation-fill-mode 속성은 실행 시간 외에 애니메이션이 적용할 값을 결정합니다. 애니메이션이 완료되면 요소는 원래 스타일로 돌아갑니다. 기본적으로 애니메이션은 animation-name 및 animation-delay 요소에 애니메이션이 적용될 때 속성 값에 영향을 미치지 않습니다. 또한 기본적으로 애니메이션은 완료된 후 animation-duration 및 animation-iteration-count 속성 값에 영향을 주지 않습니다. animation-fill-mode 속성은 이 동작을 재정의할 수 있습니다.

재산은 상속되지 않습니다.

통사론

애니메이션 채우기 모드: 없음; 애니메이션 채우기 모드: 앞으로; 애니메이션 채우기 모드: 뒤로; 애니메이션 채우기 모드: 둘 다; animation-fill-mode: 없음, 뒤로; animation-fill-mode: 둘 다, 앞으로, 없음;

10. 애니메이션 간략한 설명: 애니메이션 속성

모든 애니메이션 재생 매개변수는 animation이라는 하나의 속성으로 결합할 수 있으며 공백으로 구분하여 나열합니다.
애니메이션: 애니메이션 이름 애니메이션 지속 시간 애니메이션 타이밍 기능 애니메이션 지연 애니메이션 반복 횟수 애니메이션 방향;

애니메이션을 재생하려면 animation-name 및 animation-duration 두 가지 속성만 지정하면 충분하며 나머지 속성은 기본값을 사용합니다. 속성이 나열되는 순서는 중요하지 않습니다. 유일한 점은 애니메이션 기간의 실행 시간이 애니메이션 지연 지연보다 먼저 와야 한다는 것입니다.

11. 다양한 애니메이션

하나의 요소에 대해 여러 애니메이션을 설정하고 해당 이름을 쉼표로 구분하여 나열할 수 있습니다.

Div(애니메이션: 섀도우 1s easy-in-out 0.5s 교대로 이동, 5s 선형 2s 이동;)

| 18.02.2016

CSS3는 UI 디자이너에게 무한한 가능성을 열어주며, 가장 큰 장점은 JavaScript를 사용하지 않고도 거의 모든 아이디어를 쉽게 구현하고 생생하게 구현할 수 있다는 것입니다.

간단한 것들이 일반 웹 페이지에 활력을 주고 사용자가 더 쉽게 접근할 수 있도록 한다는 것은 놀라운 일입니다. 예를 들어 마우스를 올리면 요소가 스타일을 변형하고 변경하도록 허용할 수 있는 CSS3 전환에 대해 이야기하고 있습니다. 아래에 제공되는 9가지 CSS3 애니메이션 예제는 사이트에 반응형 느낌을 만드는 데 도움이 될 뿐만 아니라 아름답고 부드러운 전환으로 페이지의 전체적인 모양을 개선하는 데 도움이 됩니다.

자세한 내용은 파일과 함께 아카이브를 다운로드할 수 있습니다.

모든 효과는 전환 속성을 사용하여 작동합니다. 이행- "전환", "변형") 및 가상 클래스:hover(튜토리얼에서) 마우스 커서를 요소 위로 가져갈 때 요소의 스타일을 결정합니다. 예제에서는 500x309px div, 초기 배경색 #6d6d6d, 전환 시간 0.3초를 사용했습니다.

Body > div ( 너비: 500px; 높이: 309px; 배경: #6d6d6d; -webkit-transition: 모두 0.3초 용이성;; -moz-transition: 모두 0.3초 용이성;; -o-transition: 모두 0.3초 용이성;; 전환: 모두 0.3초 용이성; )

1. 마우스를 올리면 색상이 변경됩니다.

옛날에는 이러한 효과를 구현하는 것이 특정 RGB 값을 수학적으로 계산하는 매우 힘든 작업이었습니다. 이제 의사 클래스를 추가해야 하는 CSS 스타일을 작성하는 것으로 충분합니다: 선택기에 마우스를 올리면 블록 위로 마우스를 가져갈 때 원래 배경색을 원활하게(0.3초 내에) 대체할 배경색을 설정합니다.

색상: 호버( 배경:#53ea93; )

2. 프레임의 외관

흥미롭고 눈에 띄는 변화는 마우스를 올리면 부드럽게 나타나는 내부 프레임입니다. 다양한 버튼 장식에 적합합니다. 이 효과를 얻으려면 pseudo-class:hover 및 inset 매개변수(요소 내부에 그림자를 설정)와 함께 box-shadow 속성을 사용합니다. 또한 그림자 스트레치(이 경우 23px)와 색상을 설정해야 합니다.

테두리:호버(상자 그림자: 삽입 0 0 0 23px #53ea93; )

3. 스윙

이 CSS 애니메이션은 예외입니다. 여기서는 전환 속성이 ​​사용되지 않기 때문입니다. 대신 우리는 다음을 사용했습니다.

• @keyframes는 프레임별 CSS 애니메이션을 생성하기 위한 기본 지시문으로, 소위 작업을 수행할 수 있습니다. 스토리보드를 작성하고 애니메이션을 핵심 포인트 목록으로 설명합니다.
• animation 및 animation-iteration-count - 애니메이션 매개변수(지속 시간 및 속도) 및 주기 수(반복)를 설정하기 위한 속성입니다. 우리의 경우에는 1을 반복합니다.

4. 감쇠

페이드 효과는 본질적으로 요소 투명도의 간단한 변경입니다. 애니메이션은 두 단계로 생성됩니다. 먼저 초기 투명도 상태를 1, 즉 완전한 불투명도로 설정한 다음 마우스를 움직일 때 해당 값을 0.6으로 지정해야 합니다.

페이드(불투명도: 1; ) .fade:hover(불투명도: 0.6; )

반대 결과를 얻으려면 값을 바꾸십시오.

5. 배율

블록 위로 마우스를 가져갔을 때 블록을 더 크게 만들기 위해 변환 속성을 사용하고 이를 scale(1.2) 로 설정합니다. 이 경우 블록은 비율을 유지하면서 20% 증가합니다.

성장:호버( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); 변환: scale(1.2); )

6. 감소

요소를 더 작게 만드는 것은 더 크게 만드는 것만큼 쉽습니다. 다섯 번째 지점에서 스케일을 증가시키기 위해 1보다 큰 값을 지정해야 한다면 블록을 줄이기 위해 단순히 scale(0.7) 과 같이 1보다 작은 값을 지정하면 됩니다. 이제 마우스를 가리키면 블록이 원래 크기의 30%만큼 비례적으로 줄어듭니다.

축소:호버( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); 변환: scale(0.7); )

7. 원으로의 변신

일반적으로 사용되는 애니메이션 중 하나는 마우스를 가져가면 원으로 변하는 직사각형 요소입니다. :hover 및 전환과 함께 사용되는 CSS border-radius 속성을 사용하면 문제 없이 이를 달성할 수 있습니다.

원:호버(테두리 반경: 70%; )

8. 회전

재미있는 애니메이션 옵션은 요소를 특정 각도만큼 회전하는 것입니다. 이렇게 하려면 변환 속성이 ​​다시 필요하지만 다른 값인rotateZ(20deg) 를 사용해야 합니다. 이러한 매개변수를 사용하면 블록이 Z축을 기준으로 시계 방향으로 20도 회전합니다.

회전:호버( -webkit-transform:rotateZ(20deg); -ms-transform:rotateZ(20deg); 변환:rotateZ(20deg); )

9. 3D 그림자

이 효과가 플랫 디자인에 적합한지에 대해서는 디자이너마다 의견이 다릅니다. 그러나 이 CSS3 애니메이션은 매우 독창적이며 웹페이지에서도 사용됩니다. 이미 친숙한 box-shadow 속성을 사용하여 3차원 효과를 얻고(다층 그림자 생성) TranslateX(-7px) 매개변수를 사용하여 변환합니다(블록이 왼쪽으로 7픽셀 수평 이동하도록 보장). ):

Threed:hover( 상자 그림자: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: 번역X( -7px); 변환: 번역X(-7px); )

브라우저 지원

현재 전환 속성을 지원하는 브라우저는 다음과 같습니다.

변환, 상자 그림자 등과 같이 이 예제에 사용된 나머지 속성도 거의 모든 최신 브라우저에서 지원됩니다. 그러나 이러한 아이디어를 프로젝트에 사용하려면 브라우저 간 호환성을 다시 확인하는 것이 좋습니다.

이 CSS3 애니메이션 예제가 도움이 되었기를 바랍니다. 창의적인 성공을 기원합니다!

이 컬렉션에는 최고 품질의 CSS 기능이 포함되어 있습니다. 여기서는 순수 CSS만 사용하여 거의 모든 작업을 수행하는 것이 가능하다는 것을 증명하려는 유명한 레이아웃 디자이너와 디자이너의 다양하고 놀라운 데모 예제와 기술을 찾을 수 있습니다. 또한 그러한 창작물을 만드는 방법을 자세히 설명하는 몇 가지 강의를 여기에서 찾을 수도 있습니다. 이 컬렉션이 여러분에게 도움이 되기를 바랍니다.

CSS 3D 구름

이 데모에서는 3D로 멋진 구름을 만들고 편집할 수 있습니다. 이러한 CSS 클라우드는 웹 기술의 가능성이 거의 무한하다는 것을 우리에게 분명히 보여줍니다.

순수한 CSS 로고

순수 CSS로만 제작한 로고 예시입니다. 생각해 보세요. 생성에는 이미지가 사용되지 않았습니다. 그것은 단지 뭔가입니다.

CSS 애니메이션을 사용한 알파벳

알파벳에 CSS를 사용하는 훌륭하고 예술적인 예

사이트의 3D 탐색

간단하지만 매우 스타일리시한 사이트 탐색 모음은 물론 CSS3만을 사용하여 만들어졌습니다. 이미지나 스크립트가 없습니다.

CSS를 사용한 Google 기념일 로고

CSS로 만든 Google 검색 엔진의 많은 기념일 로고 중 하나입니다. 이것은 CSS 애니메이션을 잘 활용한 좋은 예입니다.

슬라이더

잘 만들어진 고품질 이미지 슬라이더. 데모에는 4가지 예시도 포함되어 있습니다.

이중 애니메이션 링

CSS 코드가 많지 않은 아름다운 애니메이션 및 다양한 색상의 반지

CSS에서 흐림

이 필터는 특히 순수 CSS를 사용하여 만들어졌기 때문에 매우 필요한 것 같습니다. 흐림 효과를 사용하면 사용자의 관심을 특정 지점으로 끌 수 있습니다.

Flexbox에 대한 전체 가이드

이 문서는 반응형 Flexbox 블록에 관한 것입니다. 기사는 영어로 작성되었지만 이러한 블록에 대해 완전히 설명합니다.

CSS3를 사용한 다채롭고 애니메이션 메뉴

아이콘이 있는 웹사이트의 아름다운 드롭다운 메뉴입니다. 큰 장점은 전적으로 CSS로 만들어졌다는 것입니다.

CSS 필터

이미지에 CSS 필터를 사용하는 방법에 대해 설명하는 영어로 된 고품질 자료입니다.

CSS 양식

수많은 예제가 포함된 CSS 양식에 대한 게시물

CSS의 진행률 표시줄

순수 CSS와 애니메이션을 사용하여 스타일리시한 진행률 표시줄을 만드는 방법에 대한 강의입니다. 예제를 보고 소스를 다운로드할 수도 있습니다.

애니메이션 - Animate.css

오늘날 인터넷에서 가장 인기 있는 CSS 애니메이션 프로젝트입니다. 아마도 가장 간단하고 최고 품질이며 무료일 것입니다.

). CSS3는 단순한 전환을 넘어 다음을 만들 수 있는 더욱 강력한 애니메이션 도구를 제공합니다. 이러한 전환은 무제한입니다..

즉, 애니메이션을 통해 우리는 하나상태(속성 집합)를 두번째, 에서 두번째에게 제삼, 필요한 경우에도 전환 횟수가 완료되면 애니메이션을 역순으로 재생합니다.

전환 효과와 마찬가지로 애니메이션을 재생하려면 페이지가 처음 로드될 때, 요소에 포커스가 있을 때, 마우스 포인터가 요소 위에 있을 때 등 재생을 트리거해야 합니다.

애니메이션 제작 단계

CSS에서 애니메이션을 만드는 과정이 어떻게 구성되어 있는지 살펴보겠습니다. 먼저 애니메이션의 키 프레임을 정의해야 합니다. 키 프레임이란 무엇입니까? 브라우저 창 왼쪽에 위치한 요소를 창 중앙으로 애니메이션화하고 원래 위치로 되돌려야 한다고 상상해 보세요. 이 애니메이션에는 세 개의 키프레임이 필요합니다.

• 첫 번째– 요소의 초기 위치를 정의합니다.
• 두번째– 요소를 창 중앙으로 이동한 후 요소의 위치를 ​​결정합니다.
• 제삼– 애니메이션의 끝점(요소의 시작 위치)을 정의합니다.

필요한 키프레임이 정의되면 키프레임을 사용하여 정의한 모든 중간 단계를 그리는 것은 사용자의 브라우저에 달려 있습니다. 즉, 이러한 간격으로 요소를 그리는 작업은 전적으로 브라우저에 달려 있습니다. 우리는 이러한 애니메이션 지점만 지정하면 됩니다. 즉, 브라우저에게 한 스타일에서 다른 스타일로 어떻게 변경되어야 하는지 알려주어야 합니다. 키 프레임 사이.

다음 단계는 관심 있는 요소에 애니메이션을 할당하는 것입니다. 이 경우 각 요소에 대해 개별 애니메이션 설정을 지정할 수 있습니다.

이 문서의 뒷부분에서는 애니메이션 지연을 설정하는 방법, 애니메이션 주기 수를 설정하는 방법, 지속 시간을 설정하는 방법, 속도와 방향, 현재 순간의 애니메이션 상태를 표시하는 방법, 심지어 애니메이션의 애니메이션 상태를 결정하는 방법에 대해 자세히 살펴보겠습니다. 애니메이션이 재생되지 않을 때의 요소 스타일. .

애니메이션 만들기를 진행하기 전에 브라우저의 애니메이션 속성에 대한 현재 지원에 주목하고 싶습니다.

키 프레임 정의

예제의 결과는 다음과 같습니다.

여러 가지 다른 애니메이션을 생성하고 이를 하나의 요소에 할당하는 다음 예를 고려하십시오.

이 예에서는 요소의 너비가 점차 증가하고 배경색이 변경되며 요소가 축을 기준으로 음수로 기울어지는 여러 애니메이션을 만들었습니다. 엑스(가로 축)을 애니메이션 중간에 배치하고 요소는 애니메이션이 끝날 무렵 요소의 원래 크기로 축소됩니다. 이는 배경색의 변화와 축을 따라 요소의 기울기를 동반합니다. 엑스반전.

예제의 결과는 다음과 같습니다.

애니메이션 주기 수

기본적으로 CSS의 모든 애니메이션이 재생됩니다. 한번 만. animation-iteration-count 속성 덕분에 애니메이션 루프가 재생될 횟수를 지정할 수 있습니다. 이는 임의의 횟수일 수 있으며, 애니메이션이 무한정 재생될 것임을 나타낼 수 있습니다. 매우 유용합니다.

점에 유의하시기 바랍니다 음수 값은 금지됩니다객관적인 이유로 정수가 아닌 값을 지정할 수 있습니다. 이 경우 지정된 값(예: 값)에 비례하여 애니메이션 주기의 일부만 재생됩니다. 1.5 애니메이션 사이클을 1.5회 재생하는 것에 해당합니다).

다음 예를 고려하십시오.

이 예에서는 요소의 배경색을 변경하면서 top CSS 속성을 사용하여 현재 위치의 위쪽 가장자리를 기준으로 상대 위치 요소를 이동하는 간단한 애니메이션을 만들었습니다.