웹 페이지의 애니메이션은 더 많은 사용자를 끌어들일 수 있습니다. 스스로에게 물어보십시오. 애니메이션이 많이 포함 된 웹 페이지를 본다면 더 많이 탐색하고 싶지 않습니까? 이제 CSS 전환을 사용하여 멋진 애니메이션으로 작업을 생동감있게 만들 수 있습니다. 그리고 이것들은 올바르게 수행되어야합니다. 다음 순서로 CSS 전환의 세계를 살펴 보겠습니다.
왜 CSS 전환인가?
예를 들어 보겠습니다. 요소의 색상을 흰색에서 파란색으로 변경하면이 변경은 거의 즉각적입니다. 보다 애니메이션 효과를 얻으려면이 변경 사항을 점진적으로 적용 할 수 있습니다. 이것은 시각적으로도 꽤 매력적으로 보입니다. CSS 전환을 활성화하여 변경이 발생하는 방식을 사용자 정의 할 수 있습니다. 가속 곡선을 따르는 특정 시간 간격에서 요소의 변화가 발생하는 방식을 정의 할 수 있습니다.
CSS 전환을 사용하면 요소, 특정 시간 간격, 가속 곡선의 속도 등. Flash를 사용하지 않고도이 모든 작업을 수행 할 수 있습니다. 자바 스크립트 .
더 나은 이해를 위해 아래 이미지를 참조 할 수 있습니다.
위 이미지에서 HTML 요소는 1 초만에 빨간색에서 파란색으로 변경됩니다. 전환이 발생할 때 중간 색상도 표시됩니다. CSS 전환을 사용하지 않을 경우 빨간색에서 파란색으로 색상이 즉시 변경된다는 것을 알 수 있습니다. 중간 색상은 표시되지 않습니다. CSS 전환을 사용하면 HTML 요소가 이전 상태에서 새 상태로 변경 될 때 애니메이션 효과를 볼 수 있습니다.
파이썬 __init__ self
전환 속성
단축 전환 속성을 사용하여 CSS 전환을 제어 할 수 있습니다. 이 속기의 사용은 쉬울뿐만 아니라 CSS에서 디버깅하는 데 상당히 불편할 수있는 비동기 매개 변수를 피할 수도 있습니다.
transition-property는 전환 효과를 원하는 CSS 속성을 지정합니다. 이러한 CSS 속성 만 애니메이션됩니다.
통사론:
전이:
초보자로서 속기 사용에 어려움이있을 수 있습니다. 현재 속기 사용이 약간 복잡하다고 생각되면 전환 속성을 개별적으로 지정할 수 있습니다. HTML 요소의 경우 아래 예와 같이 전환 속성을 하나씩 지정할 수 있습니다.
div {너비 : 100px 높이 : 100px 배경 : 연한 파란색 전환 속성 : 너비 전환 기간 : 2 초 전환 타이밍 함수 : 선형 전환 지연 : 1 초} div : hover {너비 : 300px}상자 위로 마우스를 가져갑니다.
위의 예에서는 속성 (전환 속성, 전환 기간, 전환 타이밍 기능 및 전환 지연)과 해당 값을 별도로 지정했습니다. 이러한 전환 속성에 대해 곧 배울 것입니다.
무엇을 지정해야합니까?
주로 CSS 전환을 만들기 위해 지정해야하는 두 가지 항목이 있습니다. 효과를 추가하려는 CSS 속성과 해당 효과의 지속 시간입니다.한 가지만 명심해야합니다. 기간을 지정하지 않으면 전환이 기본값 인 0 , 효과가 없습니다.
예를 들어 보겠습니다.
아래 코드는 5 초 동안 width 속성의 전환 효과를 정의합니다.
div {너비 : 100px 높이 : 100px 배경 : 파란색 전환 : 너비 5 초} div : hover {너비 : 600px}전환 효과를 보려면 위의 div 요소 위로 커서를 이동합니다.
위 코드에서 파란색 상자 위로 커서를 가져 가면 파란색 상자가 5 초 동안 점차적으로 너비가 증가하는 것을 볼 수 있습니다. 또한 파란색 상자에서 커서를 제거하면 파란색 상자가 순식간이 아니라 점차 원래 크기로 돌아갑니다. 이 전환 속성이 HTML 요소에 어떤 영향을 미치는지 확인하기 위해 너비 및 기간 값을 변경할 수도 있습니다.
둘 이상의 속성에 전환 효과를 추가 할 수도 있습니다. 쉼표를 사용하여 속성을 구분하면됩니다. 예를 들어 보겠습니다.
아래 코드에서 전환 속성은 너비, 높이 및 변형에 대해 지정됩니다.
div {padding : 15px width : 150px height : 100px background : green transition : width 2s, height 2s, transform 2s} div : hover {width : 300px height : 200px transform : rotate (360deg)} Hello World (마우스 오버)
위의 예에서 상자 위로 마우스를 가져 가면 녹색 상자가 어떻게 움직이는 지 확인할 수 있습니다.
속성과 기간 만 지정했습니다. 다양한 예와 함께 다른 매개 변수를 살펴 보겠습니다.
전환 타이밍 함수 함수 속성
이 속성은 전환 효과에 대한 속도 곡선을 정의합니다. 다음 값을 사용할 수 있습니다.
- 용이성 가치 : 효과가 처음에는 느리다가 더 빨라졌다가 느리게 끝나는 기본값입니다.
- 선형 값 : 이 효과는 전환 속도를 변경하지 않고 처음부터 끝까지 속도를 일정하게 유지합니다.
- 용이 한 가치 : 이 효과는 천천히 시작됩니다.
- 용이함 가치 : 이 효과는 느린 끝이 있습니다.
- Ease-in-out 가치 : 이 효과에는 느린 시작과 느린 끝이 있습니다.
- 3 차 베 지어 값 (n, n, n, n) : cubic-bezier 함수에서 고유 한 값 집합을 지정할 수 있습니다.
아래 코드는 선형, 이즈, 이즈 인, 이즈 아웃 및 이즈 인-아웃 값에 대한 전환 효과를 보여줍니다.
div {너비 : 100px 높이 : 100px 배경 : 분홍색 전환 : 너비 2 초} # div1 {전환 타이밍 함수 : 선형} # div2 {전환 타이밍 함수 : ease} # div3 {전환 타이밍 함수 : 완화 } # div4 {transition-timing-function : ease-out} # div5 {transition-timing-function : ease-in-out} div : hover {너비 : 300px}아래 div 요소 위로 마우스를 가져갑니다.
선의
용이함
이즈 인
완화
이즈 인 아웃
전환 지연 속성
때로는 특정 기간 후에 애니메이션이 발생하기를 원합니다. transition-delay 속성을 사용하면 전환 효과에 대한 지연을 지정할 수 있습니다. 초 단위로 지연을 지정할 수 있습니다.
전환 효과의 지연을 확인하기 위해 예를 들어 보겠습니다.
div {너비 : 100px 높이 : 100px 배경 : 노란색 전환 : 너비 3 초 전환 지연 : 1 초} div : hover {너비 : 300px}아래 div 요소 위로 마우스를 가져갑니다.
노트 : 효과가 시작되기 전에 1 초 지연되는 것을 관찰 할 수 있습니다.
위의 코드에서 커서로 노란색 상자 위로 마우스를 가져 가면 (1 초 동안) 효과가 없음을 알 수 있습니다. 1 초 후에 효과를 확인할 수 있습니다.
이것으로이 CSS Transitions 기사를 마칩니다. 이제 웹 페이지에 애니메이션을 추가 할 수 있습니다. 이 예제를 시도해보십시오.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 사용하는 기술에 능숙 해집니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 'CSS Transition'블로그의 댓글 섹션에서 언급 해 주시면 다시 연락 드리겠습니다.