일반적으로 CSS 속성 값이 변경되면 브라우저는 해당 스타일을 즉시 업데이트합니다. 예를 들어 마우스를 요소 위로 가져가면 :hover 선택기를 통해 정의된 스타일이 요소에 즉시 적용됩니다. CSS3에 전환 기능이 추가되었습니다. 이를 통해 지정된 시간 내에 요소를 한 스타일에서 다른 스타일로 원활하게 전환할 수 있습니다. 이는 간단한 애니메이션과 유사하지만 플래시나 JavaScript에 의존하지 않습니다.
CSS는 다음과 같이 전환과 관련된 5가지 속성을 제공합니다.
전환 효과를 성공적으로 구현하려면 다음 두 가지를 정의해야 합니다.
(1) 요소의 매개변수 속성 및 전환 효과
(2) 전환 효과의 지속 시간.
팁: 전환 효과는 일반적으로 요소 위로 마우스를 가져갈 때 발생합니다. 전환 기간이 설정되지 않은 경우 전환 시간의 기본값이 0이므로 전환 효과가 적용되지 않습니다.
1. 전이 속성
Transition-property 속성은 전환에 참여하는 요소의 속성 이름을 설정하는 데 사용됩니다. 구문 형식은 다음과 같습니다.
전환 속성:없음|모든|속성;
매개변수 설명은 다음과 같습니다:
없음: 전환 효과에 참여하는 속성이 없음을 나타냅니다.
all: 모든 속성이 전환 효과에 참여함을 나타냅니다.
속성: 전환 효과를 적용하는 CSS 속성 이름 목록을 정의합니다. 여러 속성 이름을 구분하려면 쉼표를 사용하세요.
샘플 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p roperty:너비,배경;}div:hover{너비:200px;배경색:블루;}</style></head><body><div></div></body></html>실행 결과:
2. 전환 기간
전환 기간 속성은 전환에 걸리는 시간(초 또는 밀리초)을 설정하는 데 사용됩니다. 구문은 다음과 같습니다.
전환 기간:시간;
그 중 시간은 전환 효과가 완료되는 데 걸리는 시간(초 또는 밀리초 단위)입니다. 기본값은 0이며, 이는 효과가 없음을 의미합니다.
전환에 참여하는 속성이 여러 개인 경우 이러한 속성에 대한 전환 시간을 차례로 설정할 수도 있습니다. 전환 기간: 1s, 2s, 3s;와 같이 여러 속성을 구분합니다. 또한 시간을 사용하여 전환에 참여하는 모든 속성에 대해 전환에 필요한 시간을 설정할 수도 있습니다. 샘플 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width, background;transition-duration:.25s,1s;}div:hover{width:200px; background-color:blue;}</style></head><body><div></div></body>< /html>3. 전환 타이밍 기능
전환 타이밍 기능 속성은 전환 애니메이션 유형을 설정하는 데 사용됩니다. 속성의 선택적 값은 다음과 같습니다.
4. 전환 지연
전환 지연 속성은 전환 효과가 시작되는 시점을 설정하는 데 사용됩니다. 속성의 구문 형식은 다음과 같습니다.
전환 지연:시간;
그 중 시간 매개변수는 전환 효과가 시작되기 전에 기다리는 시간을 초 또는 밀리초 단위로 설정하는 데 사용됩니다.
5. 전환
Transition 속성은 위의 4가지 속성의 약어로서, 위의 4가지 속성을 동시에 설정할 수 있습니다.
전환:전환 속성전환 기간전환 타이밍 기능전환 지연;
전환속성 중 전환속성(transition-property), 전환기간(transition-duration)은 필수 매개변수이고, 전환타이밍함수(transition-timing-function), 전환지연(transition-delay)은 선택 매개변수이다. 필요하지 않으면 생략할 수 있다. 또한 전환 속성을 통해 여러 그룹의 전환 효과를 설정할 수도 있습니다. 각 그룹은 쉼표로 구분됩니다.