CSS3 -- @keyframes动画

1：简介

CSS动画可以为网站添加生动的交互结果。在CSS3中，@keyframes规则被引入，用于界说CSS动画的关键帧和属性值。@keyframes规则提供了一个非常强大和机动的工具，允许开辟人员控制动画的细节，以创建各种范例的动画结果。在本文中，我们将深入探究@keyframes规则，相识怎样利用它来创建各种范例的动画。
2：什么是@keyframes规则

在CSS中，@keyframes规则用于界说动画的关键帧和属性值。关键帧是指动画中的紧张时间点，界说了元素的状态，以及该状态应该连续多长时间。在@keyframes规则中，您可以界说任意数量的关键帧，每个关键帧都可以设置任意数量的CSS属性。
@keyframes规则是一种CSS规则，可以利用它界说动画，并将动画应用于HTML元素。与其他CSS规则一样，@keyframes规则也依照CSS的层叠性和继承性。这意味着您可以在CSS代码中利用多个@keyframes规则，并将它们与其他CSS规则结合利用，以创建复杂的动画结果。
3：怎样利用@keyframes规则

要创建动画，您必要利用两个关键字：@keyframes和animation。@keyframes用于界说动画的关键帧和属性值，而animation用于将动画应用于HTML元素。
下面是一个利用@keyframes和animation创建动画的示例：

1. @keyframes myAnimation {
2.   from { background-color: red; }
3.   to { background-color: yellow; }
4. }
6. .element {
7.   animation: myAnimation 2s linear infinite;
8. }

复制代码

在上面的代码中，我们界说了一个名为myAnimation的@keyframes规则。该规则界说了从赤色到黄色的背景颜色变革。我们将该动画应用于一个名为.element的HTML元素，将动画连续时间设置为2秒，动画速度设置为线性，无限循环播放。
在@keyframes规则中，您可以界说任意数量的关键帧。关键帧由百分比值或关键字界说，体现动画中的时间点。例如，0%体现动画的开始，100%体现动画的竣事。
下面是一个界说四个关键帧的@keyframes规则示例：

1. @keyframes myAnimation {
2.   0% { transform: scale(1); }
3.   25% { transform: scale(1.2); }
4.   50% { transform: scale(0.8); }
5.   100% { transform: scale(1); }
6. }

复制代码

在上面的代码中，我们界说了一个名为myAnimation的@keyframes规则。该规则界说了四个关键帧，分别在动画的不同时间点应用不同的transform属性。
4：@keyframes规则的语法

      @keyframes规则的语法：       关键字@keyframes       动画名称       一组由百分比值或关键字界说的关键帧       每个关键帧中包罗要设置的CSS属性和属性值    下面是@keyframes规则的根本语法：

1. @keyframes animationName {
2.   0% {
3.     /* CSS属性和属性值 */
4.   }
5.   50% {
6.     /* CSS属性和属性值 */
7.   }
8.   100% {
9.     /* CSS属性和属性值 */
10.   }
11. }

复制代码

在上面的代码中，我们界说了一个名为animationName的动画。该动画在0%、50%和100%的时间点都有不同的CSS属性和属性值。在现实开辟中，您可以界说任意数量的关键帧，并在每个关键帧中界说任意数量的CSS属性和属性值。
5：利用animation属性应用动画

在界说了@keyframes规则之后，我们可以利用animation属性将动画应用于HTML元素。animation属性包罗多个子属性，如下所示：

• animation-name：指定要应用的动画名称
  
• animation-duration：指定动画的连续时间
  
• animation-timing-function：指定动画的速度曲线
  
• animation-delay：指定动画开始前的延迟时间
  
• animation-iteration-count：指定动画播放的次数
  
• animation-direction：指定动画播放的方向
  
• animation-fill-mode：指定动画播放前后的元素样式
  
• animation-play-state：指定动画的播放状态
  

下面是一个利用animation属性将动画应用于HTML元素的示例：

1. .element {
2.   animation-name: myAnimation;
3.   animation-duration: 2s;
4.   animation-timing-function: linear;
5.   animation-delay: 1s;
6.   animation-iteration-count: infinite;
7.   animation-direction: alternate;
8.   animation-fill-mode: both;
9.   animation-play-state: running;
10. }

复制代码

在上面的代码中，我们将名为myAnimation的动画应用于一个名为.element的HTML元素。我们将动画的连续时间设置为2秒，动画速度设置为线性，延迟1秒开始播放，无限循环播放。动画方向设置为瓜代播放，即正向播放后反向播放。添补模式设置为both，生存动画前后的元素样式。播放状态设置为running，体现动画正在播放。
6：留意

在利用@keyframes规则和animation属性时，您必要留意以下几点：
   1: 思量欣赏器兼容性：不同的欣赏器大概对CSS动画的支持水平有所不同。在利用@keyframes规则和animation属性时，您必要测试您的代码在不同欣赏器和设备上的体现，确保动画结果正常。
2: 思量性能标题：CSS动画大概会对网页性能产生肯定的影响。在利用CSS动画时，您必要思量到动画的复杂性和运行时所需的资源。您可以通过一些优化技巧来提高动画性能，例如利用硬件加快、镌汰动画元素的数量等。
3: 思量用户体验：动画可以为网页增加肯定的交互性和生动性，但是过多的动画结果大概会影响用户体验。在利用CSS动画时，您必要审慎地选择动画结果，确保其对用户体验没有负面影响。
  通过深入相识@keyframes规则和animation属性，您可以更好地把握CSS动画的利用方法，创建出更加生动、丰富的用户界面结果。
7：总结

在本文中，我们深入探究了CSS中的@keyframes规则。@keyframes规则是一种用于界说动画关键帧和属性值的CSS规则。利用@keyframes规则，开辟人员可以创建各种范例的动画结果。在@keyframes规则中，您可以界说任意数量的关键帧，并在每个关键帧中设置任意数量的CSS属性和属性值。
要将动画应用于HTML元素，您必要利用animation属性，并设置多个子属性来控制动画的播放。animation属性包罗多个子属性，包罗动画名称、连续时间、速度曲线、延迟时间、播放次数、播放方向、添补模式和播放状态。通过调解这些属性，您可以创建各种不同范例的动画结果。

来源：https://blog.csdn.net/qq_51248309/article/details/130491151
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！