CSS3 전환

CSS3 Transition

CSS3에서는 플래시 애니메이션이나 JavaScript를 사용하지 않고도 한 스타일에서 다른 스타일로 전환하여 특정 효과를 추가할 수 있습니다.

어떻게 작동하나요?

CSS3 전환은 요소가 한 스타일에서 다른 스타일로 점진적으로 변경되는 효과입니다.

이를 달성하려면 다음 두 가지를 지정해야 합니다.

효과를 추가할 CSS 속성을 지정합니다.
효과 지속 시간을 지정합니다.

2초 동안 width 속성에 적용되는 전환 효과:

div
{
transition: width 2s;
-webkit-transition: width 2s;
참고
: 기간을 지정하지 않으면 기본값이 0이므로 전환이 적용되지 않습니다.

지정된 CSS 속성 값이 변경되면 효과가 변경됩니다. 사용자가 요소 위에 마우스를 올리면 일반적인 CSS 속성이 변경됩니다.

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #d7ffb5;
            transition:width 2s;
            -webkit-transition:width 2s; /* Safari */
        }
        div:hover
        {
            width:300px;
        }
    </style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

다중 변경

여러 스타일의 변형 효과를 추가하려면 추가된 속성은 쉼표로 구분됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #92ffc7;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s, height 2s, transform 2s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

프로그램을 실행하여 사용해 보세요

전환 속성

다음 표에는 모든 전환 속성이 나열되어 있습니다.

3 속성:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #ffedd7;
            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>

Property	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"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:100px; background: #d7ffb5; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>鼠标移动到 div 元素上，查看过渡效果。</p> </body> </html>

제출하다 코드 재설정

자동운전