CSS는 웹 페이지를 대화 형으로 만드는 가장 강력한 방법 중 하나입니다. 그것은 우리의 기본의 모양과 느낌을 변화시킵니다. 웹 페이지. CSS가 제공하는 중요하고 흥미로운 기능 중 하나는 애니메이션을 수행 할 수 있다는 것입니다. 페이지 내에서 요소를 이동할 수 있습니다. 다음 순서로 CSS 애니메이션 여정을 시작하겠습니다.
CSS의 애니메이션
웹 사이트에 애니메이션을 추가하는 것은 사용자의 관심을 끌 수있는 좋은 방법입니다. 페이지에 가치를 더할뿐만 아니라 사용자 경험을 풍부하게합니다. CSS의 애니메이션은 두 부분으로 구성됩니다. 그들은
- 키 프레임
- 생기
CSS 애니메이션은 모든 브라우저에서 지원됩니다. 그러나 Safari (버전 8.0까지)와 같은 일부 이전 브라우저에서는 애니메이션 속성을 해석하기 위해 접두어 (-webkit-)가 필요합니다. 예를 들면 :
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % -webkit-animation-name : cssanim / * 이전 브라우저 * / -webkit-animation-duration : 5 초 / * 이전 브라우저 * / 애니메이션 -name : cssanim animation-duration : 5s} / * 이전 브라우저 * / @ -webkit-keyframes cssanim {0 % {left : 0px} 100 % {left : 300px}} @keyframes cssanim {0 % {left : 0px} 100 % {왼쪽 : 300px}}위의 샘플 html 페이지를 사용하고 추가 예제를 시도하기 위해 스타일 태그의 CSS 코드를 대체 할 수 있습니다.
CSS의 키 프레임
이것은 CSS에서 애니메이션의 빌딩 블록입니다. 웹 페이지에서 애니메이션의 특정 순간과 스타일을 정의하는 데 사용되었습니다. 즉, CSS 내부에 @keyframes를 지정하면 현재 상태를 새 상태로 수정하거나 특정 기간 동안 개체에 애니메이션을 적용 할 수있는 제어 권한이 부여됩니다.
@keyframes에는 애니메이션의 이름, 스테이지 및 속성과 같은 애니메이션을 제어하기위한 특정 속성이 있어야합니다.
이름 – 모든 애니메이션의 동작을 설명하려면 이름이 필요합니다.
단계 – 스테이지는 애니메이션의 완성을 나타냅니다. 'to'및 'from'키워드 또는 백분율로 표시 할 수 있지만 0 %는 애니메이션의 시작 상태를 나타내고 100 %는 애니메이션의 끝 상태를 나타냅니다. 백분율 표현을 사용하는 이점은 그 사이에 여러 중간 단계를 정의 할 수 있다는 것입니다. 즉, 50 % 단계 또는 75 % 등에서 애니메이션의 동작이되어야합니다.
속성 – 이러한 속성을 통해 @keyframe을 제어하여 애니메이션 중에 조작 할 수 있습니다.
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim 애니메이션 기간 : 5 초} @keyframes cssanim {0 % {transform : scale (0.5) opacity : 0} 50 % {transform : scale (1.5) opacity : 1} 100 % {transform : scale (1)}}이제 우리는 키 프레임을 정의하는 것에 대해 명확히 알고 있습니다. 애니메이션 속성을 살펴보고 요소와 개체에 애니메이션을 적용하는 방법을 설명하겠습니다. 두 가지 속성, 즉 inherit 및 initial은 모든 애니메이션 유형에 사용할 수 있습니다. 이러한 속성은 일반적으로 div 태그와 함께 사용되어 다른 동작을 나타냅니다.
머리 글자: 이 속성을 기본값으로 설정합니다.
상속 : 부모 요소에서이 속성을 상속합니다.
애니메이션 속성
- 애니메이션 이름
조작 할 @keyframes에서 사용되는 애니메이션의 이름을 지정합니다.가능한 값은 다음과 같습니다.
- 이름: 애니메이션의 키 프레임에 바인딩 할 이름을 지정합니다.
- 없음 : 이것은 기본값이며 상속되거나 계단식 애니메이션을 재정의하는 데 사용할 수 있습니다.
통사론:
애니메이션 이름 : 이름 | 없음 | 초기 | 상속하다
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim animation-duration : 5s} @keyframes cssanim {0 % {left : 0px} 100 % {left : 300px} }- 애니메이션 기간
애니메이션이 한 번의 실행을 완료하는 데 걸리는 시간을 지정합니다. 초 또는 밀리 초 (예 : 4 초 또는 400ms)로 정의됩니다. 이 속성의 기본값은 0이므로이 속성을 지정하지 않으면 애니메이션이 발생하지 않습니다.
통사론:
애니메이션 기간 : 시간
.anim {높이 : 200px 너비 : 200px 배경 : 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim animation-duration : 4 초} @keyframes cssanim {0 % {transform : scale (0.4) opacity : 0} 50 % {transform : scale (1.4) opacity : 1} 100 % {transform : scale (1)}}- 애니메이션 지연
animation-delay 속성을 사용하면 애니메이션의 지연을 지정할 수 있습니다. 애니메이션 시퀀스가 실행을 시작할시기를 정의합니다.
이 속성의 값은 초 또는 밀리 초 (ms)로 선언 할 수 있습니다. 양수와 음수 값을 모두 포함 할 수 있습니다. 양수 값은 지정된 시간이 지난 후 애니메이션이 시작되고 그때까지 애니메이션이 적용되지 않음을 나타냅니다. 반면에 음수 값은 지정된 시간 프레임 동안 이미 실행 된 것처럼 해당 지점에서 애니메이션을 즉시 시작합니다.
통사론:
애니메이션 지연 : 시간
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim 애니메이션 기간 : 4 초 애니메이션 지연 : 4 초} @keyframes cssanim {0 % {왼쪽 : 0px} 100 % {왼쪽 : 250px}}- 애니메이션 반복 횟수
이 속성은 애니메이션 시퀀스가 재생되어야하는 횟수를 나타냅니다. 이 속성의 기본값은 1입니다.가능한 값은 다음과 같습니다.
- 번호 – 반복 횟수를 나타냅니다.
- 무한 – 애니메이션이 영원히 반복되어야 함을 나타냅니다.
통사론:
애니메이션 반복 횟수 : 숫자 | 무한
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim animation-duration : 2s animation-iteration-count : 4} @keyframes cssanim {0 % {left : 0px} 100 % {왼쪽 : 100px}}- 애니메이션 방향
애니메이션의 방향을 정의합니다. 요소의 방향은 앞으로, 뒤로 또는 교대로 재생되도록 설정할 수 있습니다.이 속성의 기본값은 정상이며 각주기마다 재설정됩니다.가능한 값은 다음과 같습니다.
표준 – 이것이 기본 동작이며 애니메이션이 앞으로 재생됩니다. 각 사이클 후 애니메이션은 초기 상태가되고 다시 앞으로 재생됩니다.
역전 – 애니메이션이 역방향으로 재생됩니다. 각 사이클 후 애니메이션은 최종 상태가되어 뒤로 재생됩니다.
번갈아 하는 – 애니메이션의 방향이 반전됩니다. 즉, 모든주기에서 먼저 앞으로 재생 한 다음 뒤로 재생합니다. 모든 홀수 사이클은 앞으로 애니메이션을 렌더링하고 짝수 사이클마다 뒤로 이동을 렌더링합니다.
교대 역 – 애니메이션의 방향이 교대로 반전됩니다. 여기서 애니메이션은 먼저 뒤로 재생 된 다음 매 사이클마다 앞으로 재생됩니다. 모든 홀수 사이클은 뒤로 또는 뒤로 이동하고 짝수 사이클마다 앞으로 애니메이션을 렌더링합니다.
통사론:
애니메이션 방향 : 일반 | 역 |대체 | 교대 역
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim animation-duration : 2s animation-iteration-count : 무한} @keyframes cssanim {0 % {left : 0px} 100 % {왼쪽 : 100px}}- 애니메이션 타이밍 기능
이 속성은 속도 곡선 또는 애니메이션의 이동 스타일을 결정합니다. 애니메이션 스타일을 한 형식에서 다른 형식으로 부드럽게 변경하도록 지정됩니다. 값이 지정되지 않은 경우 기본값은 여유입니다.애니메이션 타이밍 기능의 가능한 값은 다음과 같습니다.
용이함 – 이것은 속성의 기본값입니다. 여기서 애니메이션은 느리게 시작되고 점차적으로 중간에서 빨라졌다가 다시 천천히 끝납니다.
선의 – 애니메이션은 사이클 전체 즉, 시작부터 끝까지 동일한 속도를 유지합니다.
이즈 인 – 애니메이션이 느리게 시작됩니다.
완화 – 애니메이션이 느리게 종료됩니다.
이즈 인 아웃 – 애니메이션이 시작 및 종료 중에 천천히 이동합니다.
3 차 베 지어 (n, n, n, n) –이 고급 기능을 통해 자체 값을 정의하여 맞춤형 타이밍 기능을 만들 수 있습니다. 가능한 값의 범위는 0 ~ 1입니다.
통사론:
애니메이션 타이밍 기능 : 선형 | 용이함 | 완화 | 용이성 | 용이성 아웃 |3 차 베 지어 (n, n, n, n)
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim 애니메이션 기간 : 2 초 애니메이션 방향 : 역방향} @keyframes cssanim {0 % {배경 : 주황색 왼쪽 : 0px } 50 % {배경 : 노란색 왼쪽 : 200px 상단 : 200px} 100 % {배경 : 파란색 왼쪽 : 100px}}- 애니메이션 채우기 모드
이것은 애니메이션이 재생되기 전이나 후에 애니메이션 스타일을 결정하는 특별한 속성입니다.기본적으로 요소의 스타일은 시작 전이나 종료 후에 애니메이션의 영향을받지 않습니다. 이 속성은 애니메이션의 기본 동작을 재정의하는 데 도움이되므로 유용합니다.다음은 animation-fill-mode 속성에 사용할 수있는 값입니다.
없음 – 이것은 속성의 기본값입니다. 즉, 애니메이션 스타일이 애니메이션 전후의 요소에 적용되지 않습니다.
앞으로 – 스타일은 최종 애니메이션 시퀀스 (예 : 애니메이션이 완료된 후)에서 요소에 의해 유지됩니다.
뒤로 – 스타일은 초기 애니메이션 시퀀스의 요소에 의해 유지됩니다. 즉, 특히 애니메이션 지연 동안 애니메이션이 응시되기 전입니다.
양자 모두 – 이것은 애니메이션이 앞뒤로 양쪽 방향을 따를 것임을 나타냅니다.
통사론:
애니메이션 채우기 모드 : 없음 | 앞으로 | 거꾸로 | 양자 모두
.anim {너비 : 50px 높이 : 50px 배경 : 연한 파란색 : 흰색 font-weight : 굵은 위치 : 상대 애니메이션 이름 : cssanim animation-duration : 5s animation-iteration-count : 무한 테두리 반경 : 100 %} # anim1 { animation-timing-function : ease} # anim2 {animation-timing-function : linear} # anim3 {animation-timing-function : ease-in} # anim4 {animation-timing-function : ease-out} # anim5 {animation- 타이밍 기능 : ease-in-out} @keyframes cssanim {{왼쪽 : 0px}에서 {왼쪽 : 400px}까지}- 애니메이션 재생 상태
이 속성은 재생 또는 일시 중지 상태에있는 애니메이션을 지정합니다. 또한 애니메이션이 일시 중지에서 다시 시작되면 왼쪽부터 시작됩니다.가능한 값은 다음과 같습니다.
- 놀이 – 실행중인 애니메이션을 렌더링하려면
- 일시 중지 – 애니메이션을 일시 중지 상태로 렌더링합니다.
통사론:
스파이더 파이썬 사용 방법
애니메이션 재생 상태 : 일시 중지됨 | 놀이
.anim {너비 : 100px 높이 : 100px 배경 : 연한 파란색 위치 : 상대 애니메이션 이름 : cssanim animation-duration : 3s animation-delay : 2s animation-fill-mode : backs border-radius : 100 %} @keyframes cssanim {0 % {top : 0px background-color : orange} 50 % {top : 0px background-color : green} 100 % {top : 100pxbackground-color : blue}}- 생기
이를 애니메이션 속기 속성이라고합니다. 더 깨끗한 코드에 사용됩니다. 모든 애니메이션 속성에 익숙해지면 더 빠르게 코딩하고 모든 속성을 한 줄로 정의하기 위해 애니메이션 속기를 사용하는 것이 좋습니다.
통사론:
animation : [animation-name] | [애니메이션 기간] | [애니메이션 타이밍 기능] |[애니메이션 지연] | [애니메이션 반복 횟수] | [애니메이션 방향] |[애니메이션 채우기 모드] | [애니메이션 플레이 상태]
다른 애니메이션 속성을 사용하여 위에서 보여준 모든 애니메이션 효과는 속기 사용하여 얻을 수 있습니다.생기 특성.
.anim {높이 : 200px 너비 : 200px 배경 : 연한 파란색 위치 : 상대적 테두리 반경 : 100 % 애니메이션 이름 : cssanim 애니메이션 기간 : 2 초 애니메이션 방향 : 일반 애니메이션 재생 상태 : 일시 중지됨} @keyframes cssanim {0 % {배경 : 주황색 상단 : 0px} 50 % {배경 : 노란색 왼쪽 : 200px 상단 : 200px} 100 % {배경 : 파란색 왼쪽 : 100px}}이것으로 CSS에서 사용할 수있는 모든 애니메이션 속성을 마칩니다. 보다 명확한 그림을 얻으려면 이러한 속성의 다양한 변형을 시도해야합니다. 익숙해지면 애니메이션 속기 속성이 더 깔끔하고 빠른 코드를 작성하는 데 큰 도움이 될 수 있습니다. 이것은 웹 개발자를위한 CSS에서 배우는 중요한 기술 중 하나입니다. 우리는 정적 인 것보다 움직이는 물체에 더 집중하는 경향이 있기 때문에 애니메이션은 우리가 그것을 달성하는 데 도움이 될 수 있으며 훌륭한 웹 페이지를 개발할 수도 있습니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'Animations in CSS'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.