CSS3의 Transition animation 속성 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 Transition animation 속성 사용법에 대한 자세한 설명

高洛峰

Mar 08, 2017 pm 01:27 PM

W3C 표준은 CSS3 전환을 다음과 같이 설명합니다. "CSS 전환을 사용하면 CSS 속성 값이 특정 시간 간격 내에서 원활하게 전환될 수 있습니다. 이 효과는 마우스를 클릭하거나, 포커스를 얻거나, 클릭하거나, 임의의 항목을 트리거할 때 발생할 수 있습니다. 요소로 변경하고 애니메이션 효과로 CSS 속성 값을 원활하게 변경합니다. "

전환 속성의 값에는 다음 4가지가 포함됩니다. >.Transition-property: 전환 그라데이션 처리를 수행할 HTML 요소의 CSS 속성을 지정합니다. 이 속성은 색상, 너비, 높이 등과 같은 다양한 표준 CSS 속성일 수 있습니다.

•Transition-duration: 속성 전환 기간 지정

•Transition-timing-function: 그라데이션 속도 지정:
1.easing: (점진적으로 느려짐) 기본값, 여유 기능 Bessel Er 곡선(0.25, 0.1, 0.25, 1.0)과 동일합니다.
2. 선형: (균일한 속도), 선형 함수는 베지어 곡선(0.0, 0.0, 1.0, 1.0)과 동일합니다. easy-in: (가속), easy-in 기능은 베지어 곡선(0.42, 0, 1.0, 1.0)과 동일합니다.
4. easy-out: (감속), easy-out 기능은 다음과 같습니다. 베지어 곡선(0, 0, 0.58, 1.0)
5. 가속 후 감속), 감속 기능은 베지어 곡선(0.42, 0, 0.58)과 동일합니다. , 1.0);
6 , 큐빅-베지어: (이 값을 사용하면 시간 곡선을 사용자 정의할 수 있습니다), 특정 큐빅-베지어 곡선입니다. 4개의 값(x1, y1, x2, y2)은 곡선의 점 P1과 P2에만 적용됩니다. 모든 값은 [0, 1] 범위 내에 있어야 하며, 그렇지 않으면 유효하지 않습니다.
•전환 지연: 지연 시간, 즉 전환 프로세스를 시작하는 데 걸리는 시간을 지정합니다.

브라우저 호환성

Internet Explorer 9 이하 버전에서는 전환 속성을 지원하지 않습니다.

Internet Explorer 10, Firefox, Opera 및 Chrome은 전환 속성을 지원합니다. Chrome 25 이하 및 Safari에는 접두사 -webkit-이 필요합니다.

다음은 전환 사용법을 보여주는 예시입니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition演示1</title>
    <style type="text/css">
        .animated_p {   
            margin: 100px auto;   
            width:100px;   
            height:60px;   
            background:#92B901;   
            /*简写属性*/   
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */   
            /*每个属性分开写*/   
            transition-property:width,height,transform,background,opacity;   
            transition-duration:1s,1s,1s,1s,1s,1s;   
            -webkit-border-radius:5px;   
            border-radius:5px;   
            opacity:0.4;   
        }   
        .animated_p:hover {   
            -moz-transform: rotate(360deg);   
            -webkit-transform: rotate(360deg);   
            -o-transform: rotate(360deg);   
            transform: rotate(360deg);   
            opacity:1;   
            background:#1ec7e6;   
            width:200px;   
            height:120px;   
        }   
    </style>
</head>
<body>
<p class="animated_p"></p>
</body>
</html>

로그인 후 복사

위 코드에서 p로 마우스를 이동하면 CSS 속성인 width, height,transform이 나타납니다. , 배경, 불투명도 그라데이션 전환 효과가 발생합니다. 마지막으로 CSS 스타일은 .animated_p에 정의된 스타일이 됩니다. 전환 과정은 대략 다음과 같습니다.

창어가 달로 날아가는 또 다른 온라인 예를 보여주세요. 요구 사항은 다음과 같습니다. 그림 위로 마우스를 이동하면 켜져 있으면 창이 나타나고, 멀리 이동하면 창이 사라집니다. CSS3中Transition动画属性用法详解

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition演示2</title>
    <style type="text/css">
        body{   
          color: #fff;   
          background:#000;   
        }   
        .change{   
          display:block;   
          width:400px;   
          height:400px;   
          background:url(http://www.php.cn/) no-repeat center;   
          background-size:cover;   
          border:1em solid rgba(255,255,255,.8);   
          margin:50px auto;   
        }   
        .change img{   
          display:block;   
          width:300px;   
          height:284px;   
          opacity:0;   
          -webkit-transform:translate(-100px,-100px);   
          transform:translate(-100px,-100px);   
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;   
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;   
        }   
        .change:hover img{   
          -webkit-transform:translate(0px,0px);   
          transform:translate(0px,0px);   
          opacity:1;   
        }   
    </style>
</head>
<body>
    <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
        <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
    </a>
</body>
</html>

로그인 후 복사

창을 만들기 위해 떠다니는 효과가 있고, 불투명도 속성과 결합된 변형 속성이 설정되고, 전환 효과가 추가될 수 있습니다.

CSS3中Transition动画属性用法详解