CSS3에는 몇 개의 전환 속성이 있습니까?-프런트엔드 Q&A-php.cn

CSS3에는 몇 개의 전환 속성이 있습니까?

青灯夜游

풀어 주다： 2021-12-15 13:39:42

원래의

2156명이 탐색했습니다.

5가지가 있습니다: 1. 전환 속성, 2. 전환 기간 속성, 3. 전환 타이밍 속성, 5. 전환 속성.

CSS3에는 몇 개의 전환 속성이 있습니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 전환을 사용하면 제한된 시간 내에 한 속성 값에서 다른 속성 값으로 변경할 수 있습니다.

CSS3에는 5개의 전환 속성이 있습니다:

3 div에는 전환 코드가 너무 많습니다{}실제로 축약된 전환 속성을 사용하고 이를 얻으려면 두 줄의 코드만 사용하면 됩니다:

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

로그인 후 복사

(동영상 공유 학습:

Attribute	Description	CSS
transition	약어 속성은 하나의 속성에 4개의 전환 속성을 설정하는 데 사용됩니다.	3
transition-property	전환을 적용하는 CSS 속성의 이름을 지정합니다.	3
transition-duration	전환 효과에 걸리는 시간을 정의합니다. 기본값은 0입니다.	3
transition-timing-function	은 전환 효과의 시간 곡선을 지정합니다. 기본값은 "쉽게"입니다.	3
transition-delay	전환 효과가 시작되는 시점을 지정합니다. 기본값은 0입니다.	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; } div:hover { width: 200px; } </style> </head> <body> <div></div> <p>鼠标移动到 div 元素上，查看过渡效果。</p> <p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p> </body> </html> 로그인 후 복사