CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

高洛峰

Mar 07, 2017 pm 01:09 PM

1. 전환 사용

전환 효과는 일반적으로 브라우저에서 요소의 CSS 속성을 직접 변경하여 얻을 수 있습니다. 예를 들어 :hover 선택기를 사용하는 경우 사용자가 요소 위로 마우스를 가져가면 브라우저는 선택기와 관련된 속성을 적용합니다.

사용자가 범위 요소 위에 마우스를 올리면 브라우저가 응답하고 새 속성을 직접 적용합니다. 변경 사항은 다음과 같습니다.

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

CCS 전환 속성을 사용하면 새 속성 값이 적용되는 속도를 제어할 수 있습니다. 예를 들어, 바나나라는 단어 위로 마우스를 이동하는 효과가 더욱 조화롭게 되도록 예제에서 범위 요소의 모양을 점진적으로 변경하도록 선택할 수 있습니다.

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

전환 지연 및 전환 기간 속성은 ms(밀리초) 또는 s(초) 단위의 숫자인 CSS 시간으로 지정됩니다. .

전환 약어 속성의 형식은 다음과 같습니다.

transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

이전 예시의 CSS 코드를 수정하세요.

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
#banana { font-size: large; border: medium solid green;}   
#banana:hover {   
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
    transition-delay: 100ms;   
    transition-property: background-color,color,padding,font-size,border;   
    transition-duration: 500ms;   
}

이 예에서는 #banana:hover 선택기를 통해 적용되는 전환이 스타일에 추가됩니다. 사용자가 범위 요소 위로 마우스를 가져간 후 100ms 후에 전환이 시작되고 500ms 동안 지속됩니다. 전환은 배경색, 색상, 패딩, 글꼴 크기 및 테두리 속성에 적용됩니다. 아래 렌더링은 이 전환의 점진적인 진행을 보여줍니다.

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

이 예에서 여러 속성이 어떻게 지정되는지 확인하세요. 전환 속성의 값은 전환 효과가 동시에 나타나도록 쉼표로 구분됩니다. 지연 시간과 지속 시간에 대해 여러 값을 지정할 수 있습니다. 즉, 서로 다른 속성이 서로 다른 시점에서 전환을 시작하고 지속 시간도 달라집니다.

1.1 역방향 전환 만들기

전환은 해당 스타일이 적용될 때만 적용됩니다. :hover 선택기는 예제 스타일에 사용되었습니다. 즉, 사용자가 범위 요소 위로 마우스를 가져갈 때만 스타일이 적용됩니다. 사용자가 범위 요소에서 마우스를 떼면 #banana 스타일만 남습니다. 기본적으로 요소의 모양은 즉시 원래 상태로 돌아갑니다.

이러한 이유로 대부분의 전환은 쌍으로 발생합니다. 임시 상태로의 전환과 반대 방향의 역전환입니다. 다른 전환 스타일을 적용하여 원래 스타일로 원활하게 돌아가는 방법을 보여주기 위해 이전 예제의 CCS 코드를 수정합니다.

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
#banana {   
    font-size: large; border: medium solid green;   
    transition-delay: 100ms;   
    transition-duration: 500ms;}   
#banana:hover {   
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
    transition-delay: 100ms;   
    transition-property: background-color,color,padding,font-size,border;   
    transition-duration: 500ms;   
}

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

1.2 중간값 계산 방법 선택

전환 사용 시 브라우저에 필요한 사항 각 속성의 초기 값과 최종 값 사이의 중간 값을 계산합니다. 네 개의 점으로 제어되는 3차 베지어 곡선으로 표현되는 중간 값을 계산하는 방법을 지정하려면 전환 타이밍 함수 속성을 사용하십시오. 선택할 수 있는 5개의 사전 설정된 곡선이 있으며 다음 값으로 표시됩니다.

* 여유(기본값)

* 선형

* 여유

* 이즈 아웃

* 이즈 인 아웃

아래 그림에서 5개의 곡선을 볼 수 있는데, 시간이 지남에 따라 중간 값이 최종 값으로 변경되는 비율을 보여줍니다. .

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

이러한 값을 알아내는 가장 쉬운 방법은 자신의 HTML 문서에서 실험해 보는 것입니다. 사용자 정의 곡선을 지정하는 데 사용할 수 있는 또 다른 값인 큐빅 베지어(cubic-bezier)가 있습니다.

전환 타이밍 기능 속성의 적용을 보여주기 위해 이전 예제의 CSS 스타일을 다음과 같이 수정합니다.

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
#banana {   
    font-size: large; border: medium solid green;   
    transition-delay: 10ms;   
    transition-duration: 250ms;;   
}   
#banana:hover {   
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
    transition-delay: 100ms;   
    transition-property: background-color,color,padding,font-size,border;   
    transition-duration: 500ms;   
    transition-timing-function: linear;   
}

2. 애니메이션 사용

CSS 애니메이션은 본질적으로 향상된 전환입니다. 한 스타일에서 다른 스타일로 전환하는 방법에 있어 더 많은 선택, 더 많은 제어 및 더 많은 유연성이 제공됩니다.

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

애니메이션 약어 속성의 형식은

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

입니다.

注意，这些属性都不是用来指定要作为动画的CSS属性的。这是因为动画是在两部分定义的。第一部分包含在样式声明中，使用了上面表中列出的属性。它们定义了动画的样式，但并没有定义哪些属性是动画。第二部分使用@key-frames规则窗口，用来定义定义动画的属性。从下面代码中可以看到定义动画的这两部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        #ball{   
            width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px;   
            -webkit-animation-delay: 100ms;   
            -webkit-animation-duration: 2000ms;   
            -webkit-animation-iteration-count: infinite;   
            -webkit-animation-timing-function: linear;   
            -webkit-animation-name:&#39;GrowQuare&#39;;   
        }   
        @-webkit-keyframes GrowQuare {   
            to {   
                background-color: yellow;   
                border-radius: 0;   
            }   
        }   
    </style>
</head>
<body>
<p id="ball"></p>
</body>
</html>

要明白在这个示例中做了什么，应该仔细研究一下动画的两部分。第一部分是在样式中定义动画属性，是跟#ball选择器一起的。先看看基本属性：选择器样式应用100ms后开始播放动画属性，持续时间2000ms，无限重复播放，中间值使用linear函数计算。除了重复播放动画，这些属性在过渡中都有对应属性。

这些基本的属性并没有指出为哪些CSS属性应用动画。为此，要使用 animation-name 属性给动画属性起个名字，这里叫 GrowsQuare 。这样，就相当于告诉浏览器找一组名为 GrowQuare 的关键帧，然后将这些基本属性的值应用到 @keyframes指定的动画属性上。下面是此例代码中关键帧的声明（这里省略了-webkit前缀）：

@-webkit-keyframes GrowQuare {   
     to {   
         background-color: yellow;   
         border-radius: 0;   
     }   
 }

声明的开始是@keyframes，接着指定了这组关键帧的名字 GrowQuare。声明内部指定了一组要应用的动画效果。to 声明定义了一组设置动画样式的属性，同时也定义了动画结束时这些属性的最终值。动画的初始值来自进行动画处理的元素在应用样式之前的属性值。

此例的效果是一个大小为180像素的圆形，渐变成正方形。其显示效果如下图所示：

CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론

以上这篇浅谈CSS过渡、动画和变换就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론相关文章请关注PHP中文网！

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.