CSS 애니메이션의 여러 속성에 대해 자세히 알아보세요.-CSS 튜토리얼-php.cn

기본적으로 CSS 애니메이션 효과는 브라우저에 의해 제어되고 렌더링됩니다. 이론상으로는 JavaScript 애니메이션 효과보다 성능이 뛰어나지만 제어가 JavaScript만큼 유연하고 편리하지는 않습니다. CSS 애니메이션은 변환, 전환, 애니메이션의 세 부분으로 나누어집니다. Transfrom은 주로 요소의 변형을 제어하며 시간 제어 개념이 없습니다. 전환과 애니메이션은 애니메이션의 핵심 부분입니다. 두 개 이상의 상태 사이를 전환하는 요소의 효과입니다.

1: 전환

전환을 사용하면 CSS 속성이 변경될 때 과도한 애니메이션 효과를 추가할 수 있습니다. 일반적으로 CSS 속성 변경 사항은 즉시 적용됩니다. 새 속성 값은 매우 짧은 시간 내에 이전 속성 값을 대체한 다음 브라우저가 스타일 콘텐츠를 다시 그립니다(아마도 리플로우 또는 다시 그리기). 대부분의 경우 스타일 변경이 갑작스럽게 느껴지지만 전환을 통해 부드러운 변경 효과를 추가할 수 있습니다. 예를 들어

.content {
  background: magenta;
  transition: background 200ms ease-in 50ms;
}
.content:hover {
  background: yellow;
  transition: background 200ms ease-out 50ms;
}

로그인 후 복사

transition의 호환성은 나쁘지 않습니다. 기본적으로 모바일 장치에서 사용할 수 있으며, 지원되면 전환 효과가 있고, 지원되지 않으면 점진적인 향상이 가능합니다. , 직접 전환되므로 안심하고 사용할 수 있습니다.

transition attribute

CSS 전환에는 네 가지 속성이 있습니다.

transition-delay 延迟多久后开始动画
transition-duration 过渡动画的一个持续时间
transition-property 执行动画对应的属性，例如 color，background 等，可以使用 all来指定所有的属性
transition-timing-function 随着时间推进，动画变化轨迹的计算方式，常见的有：linear，ease，ease-in，ease-out，cubic-bezier(...) 等。

로그인 후 복사

이 네 가지 속성은 다음과 같이 축약될 수 있습니다.

.class {
  transition:}

로그인 후 복사

예를 들어 이전 예에서 .content 요소가 마우스를 가리키면 배경색이 자홍색에서 변경됩니다. 50밀리초. 노란색으로 변화, 지속 시간은 200밀리초(Easy-out 알고리즘 사용) 참고: 전환은 해당 선택기의 속성에 적용됩니다. 예를 들어 .content:hover 의 전환은 .content 의 자홍색에서 노란색으로의 전환 효과를 제어하는 반면, .content 의 전환은 호버가 수행되지 않을 때 배경을 제어합니다. 노란색에서 자홍색으로 색상이 변경되는 과정입니다.

all 이 속성의 값은 해당 선택기 아래 요소의 모든 CSS 속성에 적용됩니다. CSS 규칙이 선언된 위치에 관계없이 동일한 코드 블록으로 제한되지 않습니다.

다른 효과에 대응하기 위해 다른 속성이 필요한 경우 다음과 같이 작성할 수 있습니다.

.demo {
  transition-property: all, border-radius, opacity;
  transition-duration: 1s, 2s, 3s;
  /* 当这样使用时，确保 all 在第一个，因为如果 all 在后边的话，它的规则会覆盖掉前边的属性 */
}

로그인 후 복사

전환의 none 속성은 거의 사용되지 않으며 일반적으로 원래 애니메이션 효과를 제거하는 데 사용됩니다. 특정 속성의 애니메이션 효과를 제거하기 위해 none을 쉼표와 함께 사용할 수 없습니다. 특정 속성 효과를 제거하려면 제거할 속성을 쓰지 않고 전환을 다시 작성하거나 다음을 사용할 수 있습니다. 방법은 기간을 0으로 설정하는 것입니다.

모든 CSS 속성이 전환 효과를 추가할 수 있는 것은 아닙니다. 자세한 내용은 설명서: 애니메이션 가능 속성을 참조하세요. 자주 접할 수 있는 것은 표시 속성이 전환 효과를 추가할 수 없다는 점입니다. 나중에 언급할 가시성 또는 애니메이션 사용을 고려해 볼 수 있습니다.

전환 타이밍 함수의 각 알고리즘의 변화 곡선에 대해서는 크롬의 개발자 도구를 사용하여 CSS에서 해당 전환을 작성한 후 마우스를 전환 타이밍 함수로 이동하여 살펴볼 수 있습니다.

CSS 애니메이션의 여러 속성에 대해 자세히 알아보세요.

이렇게 하면 이 알고리즘의 변화 궤적이 어떻게 사용되는지 명확하게 확인한 다음 필요에 맞는 알고리즘을 선택할 수 있습니다.

전환 관련 이벤트

transitionend 이벤트는 전환 애니메이션이 끝나면 트리거됩니다. 일반적으로 애니메이션이 끝난 후 다음 애니메이션 효과를 계속하는 등 몇 가지 메서드를 실행합니다. Zepto.js의 애니메이션 메소드는 모두 CSS 애니메이션 속성을 사용하여 처리되며 애니메이션 실행 후의 콜백은 이 이벤트를 사용하여 처리되어야 합니다.

Transitionend 이벤트가 트리거되면 propertyName, elapsedTime과 같은 일부 애니메이션 관련 매개변수가 전달됩니다. 자세한 내용은 Transitionend를 참조하세요.

transition 应用

transition 在很多 UI 框架中是很常见的属性，当我们开发一个交互效果的时候，从某个状态到达另外一个状态时，transition 可以使得这个过程变得更加舒适和顺滑。例如上边的 hover 时的背景颜色的切换，控制元素的显示和隐藏时使用 opacity 来实现渐隐渐现。

当 transition 配合上 transform 提供的多样化的元素变化能力后，便可以绘制出很多有趣的交互渐变效果了。最近使用过程中做的一个简单效果的例子，点击查看。

很常见还有表单 input 报错时边框变红，按钮 hover 时背景渐变等，很多的 CSS 交互效果会因为 transition 变得更加自然。

二：animation

虽然 transition 已经提供了很棒的动画效果了，但是我们只能够控制从一个状态到达另外一个状态，没法来控制多个状态的不断变化，而 animation 而帮助我们实现了这一点。使用 animation的前提是我们需要先使用 @keyframes 来定义一个动画效果，@keyframes 定义的规则可以用来控制动画过程中的各个状态的情况，语法大抵是这个样子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}

로그인 후 복사

@keyframes 关键词后跟动画的名字，然后是一个块，块中有动画进度的各个选择器，选择器后的块则依旧是我们常见的各个 CSS 样式属性。

在这里，控制动画的整个过程的选择器很重要，语法相对简单，你可以使用 from 或者 0% 来表示起始状态，而 to 或 100% 来表示结束状态。中间的部分你都可以使用百分比来进行表示。选择器后的块则是在到达这个进度状态时元素的样式应该是怎么样的，整个的过渡动画在这个的控制基础上由浏览器去绘制。

同样地，不是所有的属性都可以有动画效果，MDN 维护了一份 CSS 动画的属性列表可供参考。

通常来说，多个状态下的相同属性的值应该是可以取到它们的中间值的，例如 left 从 0% 到 100%，如果没法取到中间值，如 height 从 auto 到 100px，有可能出现奇怪的一些状况，并且不同浏览器对此的处理也不尽相同，所以请尽量避免这种情况。

animation 属性

animation 的属性比 transition 多，如下：

animation-name 你需要的动画效果的 @keyframes 的名字。
animation-delay 和 transition-delay 一样，动画延迟的时间。
animtaion-duration 和 transition-duration 一样，动画持续的时间。
animation-direction 动画的一个方向控制。

로그인 후 복사

默认是 normal，如果是上述的 left 从 0% 到 100%，那么默认是从左到右。如果这个值是 reverse，那么便是从右到左。

由于 animation 提供了循环的控制，所以还有两个值是 alternate 和 alternate-reverse，这两个值会在每次循环开始的时候调转动画方向，只不过是起始的方向不同。

例如还是 left 的例子，假设设置了 animation-direction: alternate; animation-iteration-count: infinite;，那么这个元素从左到右移动后，便调转方向，从右到左，如此循环。

animation-fill-mode 这个属性用来控制动画前后，@keyframes 中提供的 CSS 属性如何应用到元素上。
默认值是 none，还有其他三个选择：forwards，backwards，both。

假设是 none，那么动画前后，动画中声明的 CSS 属性都不会应用到元素上。即动画效果执行后，元素便恢复正常状态。

如果是 forwards，那么动画结束后，会把最后状态的 CSS 属性应用到元素上，即保持动画最后的样子。而 backwards 则相反，both 则都会，计算得出最后的一个结果。

animation-timing-function 和 transition-timing-function 一样，动画变化轨迹的算法。

animation-iteration-count 动画循环次数，如果是 infinite 则无限次。有趣的是，支持小数，即 0.5 表示动画执行到一半。

animation-play-state 动画执行的状态，两个值 running 或者 paused，可以用来控制动画是否执行。

上述这些属性可以简写为：

.class {
  animation:}

로그인 후 복사

略长，当然，平时使用中可能是省略部分参数的。

animation 需要留意的东西

1.优先级

记得 CSS 中的层叠概念么，优先级高的属性会覆盖优先级低的属性，当 animation 应用到元素中时，动画运行过程中，@keyframes 声明的 CSS 属性优先级最高，比行内声明 !important 的样式还要高。现在浏览器的实现是这样子的，但是标准文档中的说法应该是可以被 !important 声明的属性所覆盖。

多个动画的顺序

由于 animation-name 是可以指定多个动画效果的，所以这里便会出现动画的一个顺序问题。后指定的动画会覆盖掉前边的，例如：

#colors {
  animation-name: red, green, blue; /* 假设这些 keyframe 都是修改 color 这个属性 */
  animation-duration: 5s, 4s, 3s;
}

로그인 후 복사

上述代码的动画效果会是这样：前 3 秒是 blue，然后接着 1 秒是 green，最后 1 秒是 red。整个覆盖的规则是比较简单的。

display 的影响

如果一个元素的 display 设置为 none，那么在它或者它的子元素上的动画效果便会停止，而重新设置 display 为可见后，动画效果会重新重头开始执行。

animation 相关事件

我们可以通过绑定事件来监听 animation 的几个状态，这些事件分别是：

animationstart 动画开始事件，如果有 delay 属性的话，那么等到动画真正开始再触发，如果是没有 delay，那么当动画效果应用到元素时，这个事件会被触发。

animationend 动画结束的事件，和 transitionend 类似。如果有多个动画，那么这个事件会触发多次，像上边的例子，这个事件会触发三次。如果 animation-iteration-count 设置为 infinite，那么这个事件则不会被触发。

animationiteration 动画循环一个生命周期结束的事件，和上一个事件不一样的是，这个在每次循环结束一段动画时会触发，而不是整个动画结束时触发。无限循环时，除非 duration 为 0，否则这个事件会无限触发。

animation 应用

animation 可以实现控制在多个状态下进行动画切换，所以应用的场景比 transition 要广泛得多，可以使用 animation 实现大量的动效.

위 내용은 CSS 애니메이션의 여러 속성에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!