집 >웹 프론트엔드 >CSS 튜토리얼 >전환 효과를 얻기 위해 전환 속성을 사용하는 CSS3 정보

전환 효과를 얻기 위해 전환 속성을 사용하는 CSS3 정보

不言원래의: 2018-06-20 18:05:122444검색

CSS3의 새로운 변환 속성은 변환 과정에서 요소의 전환 효과를 실현하고 기본 애니메이션을 구현할 수 있습니다. 이 글에서는 CSS3가 전환 속성을 사용하여 전환 효과를 얻는 방법을 소개합니다. 필요한 친구는 이 글을 참조하세요

속성에 대한 자세한 설명

전환 속성의 목적은 일부 CSS 속성을 만드는 것입니다. (예: 배경)이 부드러운 전환 효과로 나타납니다. 다음 4가지 속성으로 구성된 병합 속성입니다.

transition-property: 배경 등 애플리케이션 전환의 CSS 속성을 설정합니다.
transition-duration: 전환 효과에 걸리는 시간을 설정합니다. 기본값은 0입니다.
transition-timing-function: 전환 효과의 시간 곡선을 설정합니다. 기본값은 "쉽게"입니다.
transition-delay: 전환 효과가 시작되는 시기를 지정합니다. 기본값은 0입니다.

예:

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

전환 속성을 정의할 때 전환 속성과 전환 기간이 필수이고 나머지 두 개는 선택 사항입니다.

transition-property 및 전환 기간

transition-property는 전환 효과를 적용하기 위한 CSS 속성을 지정하는 데 사용됩니다(완전하지 않을 수 있음):

width
height
color
배경(색상, 이미지, 위치)
transform(다음 게시물에서)
border(색상, 너비)
위치(위, 아래, 왼쪽, 오른쪽 )
텍스트(크기, 무게, 그림자, 단어 간격)
margin
padding
opacity
visibility
z-index
모두

전환 기간 속성은 지정된 속성의 전환 효과 시간(초(s) 또는 밀리초(ms))을 설정하는 데 사용됩니다.

transition-delay 및 전환 타이밍 기능

transition-delay는 전환 효과가 시작되는 시간을 설정하는 데 사용됩니다. 기본값은 0이며 초(s) 또는 밀리초(ms)일 수 있습니다. 전환 지연이 음수이면 전환 효과가 일찍 시작된다는 의미입니다.

transition-timing-function은 전환 효과를 설정하는 데 사용됩니다. 이러한 효과에는 다음이 포함됩니다.

ease - 처음에는 느리고, 중간에는 빠르며, 마지막에는 느립니다
ease-in - 페이드 인 효과 , 느리게 시작하고 빠르게 종료
ease-out - 페이드 아웃 효과, 빠르게 시작하고 느리게 종료합니다.
ease-in-out - 느리게 시작하고 느리게 종료
cubic-bezier(n, n,n,n) - 입방체 - 베지어 함수에서 자신만의 값을 정의해보세요. 가능한 값은 0과 1 사이의 숫자 값입니다.

예:

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

다중 속성

다중 속성의 경우 각 속성의 효과는 쉼표로 구분됩니다.

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

호환성

Internet Explorer 10, Firefox, Opera 및 Chrome은 전환 속성을 지원합니다.

Safari는 대체 -webkit-transition 속성을 지원합니다.

Internet Explorer 9 및 이전 브라우저는 전환 속성을 지원하지 않습니다.

Trigger

전환 효과에는 이전에 정의된 속성이 필요합니다. 전환 효과는 hover, :focus, :active 등과 같은 트리거링을 통해 적용됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

전환 효과를 얻기 위해 전환 속성을 사용하는 CSS3 정보

관련 기사