CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론
- 高洛峰원래의
- 2017-03-07 13:09:211493검색
1. 전환 사용
전환 효과는 일반적으로 브라우저에서 요소의 CSS 속성을 직접 변경하여 얻을 수 있습니다. 예를 들어 :hover 선택기를 사용하는 경우 사용자가 요소 위로 마우스를 가져가면 브라우저는 선택기와 관련된 속성을 적용합니다.
사용자가 범위 요소 위에 마우스를 올리면 브라우저가 응답하고 새 속성을 직접 적용합니다. 변경 사항은 다음과 같습니다.
CCS 전환 속성을 사용하면 새 속성 값이 적용되는 속도를 제어할 수 있습니다. 예를 들어, 바나나라는 단어 위로 마우스를 이동하는 효과가 더욱 조화롭게 되도록 예제에서 범위 요소의 모양을 점진적으로 변경하도록 선택할 수 있습니다.
전환 지연 및 전환 기간 속성은 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 동안 지속됩니다. 전환은 배경색, 색상, 패딩, 글꼴 크기 및 테두리 속성에 적용됩니다. 아래 렌더링은 이 전환의 점진적인 진행을 보여줍니다.
이 예에서 여러 속성이 어떻게 지정되는지 확인하세요. 전환 속성의 값은 전환 효과가 동시에 나타나도록 쉼표로 구분됩니다. 지연 시간과 지속 시간에 대해 여러 값을 지정할 수 있습니다. 즉, 서로 다른 속성이 서로 다른 시점에서 전환을 시작하고 지속 시간도 달라집니다.
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;
}
1.2 중간값 계산 방법 선택
전환 사용 시 브라우저에 필요한 사항 각 속성의 초기 값과 최종 값 사이의 중간 값을 계산합니다. 네 개의 점으로 제어되는 3차 베지어 곡선으로 표현되는 중간 값을 계산하는 방법을 지정하려면 전환 타이밍 함수 속성을 사용하십시오. 선택할 수 있는 5개의 사전 설정된 곡선이 있으며 다음 값으로 표시됩니다.
* 여유(기본값)
* 선형
* 여유
* 이즈 아웃
* 이즈 인 아웃
아래 그림에서 5개의 곡선을 볼 수 있는데, 시간이 지남에 따라 중간 값이 최종 값으로 변경되는 비율을 보여줍니다. .
이러한 값을 알아내는 가장 쉬운 방법은 자신의 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 애니메이션은 본질적으로 향상된 전환입니다. 한 스타일에서 다른 스타일로 전환하는 방법에 있어 더 많은 선택, 더 많은 제어 및 더 많은 유연성이 제공됩니다.
애니메이션 약어 속성의 형식은
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:'GrowQuare';
}
@-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过渡、动画和变换就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多CSS 전환, 애니메이션 및 변환 방법에 대한 간략한 토론相关文章请关注PHP中文网！