CSS动画简单介绍

最新推荐文章于 2024-05-23 22:54:35 发布

dfsgwe1231

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量176

点赞数

文章标签： javascript ViewUI

移动对象吸引了更多注意力，并为页面增添了风味，CSS动画是CSS中的一项功能，允许在不使用任何JavaScript或Flash插件的情况下对DOM元素进行动画处理，在本文中，我们将介绍与动画有关的所有属性。

要使动画生效，我们需要了解以下语法：


.element-to-animate {
  animation : name duration timing-function delay iteration-count direction fill-mode;
}

@ keyframes name-of-the-keyframe {
  0% {
    property-to-animate :value-start;
  }
  30% {
    property-to-animate :value- 30pc ;
  }
  60% {
    property-to-animate :value- 60pc ;
  }
  100% {
    property-to-animate :value-end;
  }
}

首先，我们选择类名称为“ element-to-animate”的元素，然后应用animation属性。让我们讨论动画属性的每个部分以及如何使用它：

动画名称：

此属性应等于我们要为元素设置动画的关键帧的名称，但是什么是关键帧？它是一个块元素，我们在其中指定具有属性值的动画步骤以在每个步骤中进行动画处理。您可以根据需要在0％到100％的步骤之间添加许多步骤，并且可以在每个关键帧步骤内添加许多属性（如果该属性在动画属性列表中）。

关键帧示例：


@ keyframes name-of-the-keyframe {
  0% {
    width : 100px ;
    height : 100px ;
  }
  100% {
    width : 300px ;
    height : 300px ;
  }
}

因此，在此示例中，我们的元素将以等于100px的宽度和高度开始，然后逐渐移至300px。关键帧的名称应该唯一。

动画时间：

这是动画将在步骤0％和100％之间进行的时间。如果这是无限动画，则每个周期将等于动画持续时间，并且动画将无限循环。

动画定时功能：

此属性描述动画在循环中的行为。可能的值是线性，缓动，缓入，缓动和缓入。检查以下描述这些功能的链接： https : //www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

要获得更多个性化的计时功能，可以使用cubic-bezier（）
功能，请访问以下网站：

https://cubic-bezier.com/ 。

动画延迟：

加载元素后，可以在动画开始之前定义偏移。如果您希望动画立即开始，则可以将animation-delay：0s放进去。

警告：

.element-to-animate {
      animation : keyframe-name 2s ease 0 infinite normal forwards;
    }

在此示例中，动画将不起作用，您必须在动画延迟中输入0或0ms。

动画迭代次数：

如果我们指定一个等于n的数字，则动画将精确地运行n个周期并停止。此属性还可以将“ infinite”作为值并无限运行动画。

动画方向：

它指定了动画的方向以及在循环结束时应如何操作，可能的值包括：正常，反转，交替和交替反转。要了解这些值之间的区别，请使用以下示例：

<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  < title > Animation </ title >
  < style > 
    @ keyframes move {
      0% {
        left : 100px ;
      }
  
      100% {
        left : 800px ;
      }
    }

    .container {
      width : 50px ;
      height : 50px ;
      background : #555 ;
      position : absolute;
      top : 200px ;
      left : 100px ;
      animation : move 2s ease-out 0s infinite normal;
    }
   </ style >
</ head >
< body >
  < div class = "container" > </ div >
</ body >
</ html >

因此，我们有一个带有黑色背景的div元素，该元素通过无限循环从左向右移动来进行动画处理，我们将为动画方向赋予不同的值并查看结果。

动画方向：正常；

动画方向：反向；

动画方向：交替；

动画方向：交替反向；

交替反向和交替反向的区别在于，当第一次加载元素时，交替反向从步骤100％开始，然后下降到步骤0％，并在这些步骤之间继续交替。对于备用，它是第一次从步骤0％移到步骤100％。

动画填充模式：

在动画结束之后和开始之前，我们可以使用此属性指定动画元素的状态。有三个可能的值：前进，后退和两者。让我们修改前面的示例使其动画一次迭代，然后为animation-fill-mode属性尝试不同的值。


<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  < title > Animation </ title >
  < style > 
    @ keyframes move {
      0% {
        left : 100px ;
      }
  
      100% {
        left : 500px ;
      }
    }

    .container {
      width : 50px ;
      height : 50px ;
      background : #555 ;
      position : absolute;
      top : 200px ;
      left : 300px ;
      animation : move 3s ease-out 5s 1 normal forwards;
    }
   </ style >
</ head >
< body >
  < div class = "container" > </ div >
</ body >
</ html >

在此示例中，我们有一个div元素，其初始位置为“ left：300px”，动画从“ left：100px”开始，然后移至“ left：500px”。

animation-fill-mode：转发；

元素在动画开始之前停留在其初始位置（左300px）（动画延迟等于5s）。动画开始时，该元素跳到步骤0％的位置并移动到步骤100％的位置并停留在该位置，该元素不会返回到初始位置。

动画填充模式：向后；

在动画延迟期间，该元素占据关键帧中步骤0％提供的位置（左100px），在此期间，该元素将忽略其初始位置（左300px），并且仅在动画结束后才返回到该位置。

另一方面，在动画结束之后，正向更改元素的行为，而在动画开始之前，向后更改元素的行为。他们以不同的方式改变元素，我们要问的问题是，如果我们需要两种行为都该怎么办？两者都是动画填充模式。

animation-fill-mode：两者；

我们提供了使动画工作的所有属性，但是还有一个我们没有提供的属性，它使动画可以交互。在下一节中，我将介绍animation-play-state属性以及如何使用它与动画进行交互。

动画播放状态：

<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < link rel = "stylesheet" type = "text/css" href = "styles/test.css" >
  < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  < title > Animation </ title >
  < style > 
    @ keyframes move {
      0% {
        left : 100px ;
      }
  
      100% {
        left : 500px ;
      }
    }
    .container {
      width : 50px ;
      height : 50px ;
      background : #555 ;
      position : absolute;
      top : 200px ;
      left : 100px ;
      animation : move 2s ease-out 0s infinite normal forwards;
    }
    
    .container :hover {
      animation-play-state : paused;
    }
   </ style >
</ head >
< body >
  < div class = "container" > </ div >
</ body >
</ html >

如我们所见，使用悬停伪选择器的动画播放状态暂停宽度，当鼠标悬停在容器上方时，我们可以停止动画。

结论：

该功能非常强大，可以以最简单的方式添加出色的动画，但是该支持尚不支持跨浏览器，在撰写本文时，“我可以使用”网站向我们展示了以下状态：

From: https://hackernoon.com/a-simple-introduction-to-css-animation-l72b325c

dfsgwe1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画简单介绍

移动对象吸引了更多注意力，并为页面增添了风味，CSS动画是CSS中的一项功能，允许在不使用任何JavaScript或Flash插件的情况下对DOM元素进行动画处理，在本文中，我们将介绍与动画有关的所有属性。要使动画生效，我们需要了解以下语法： .element-to-animate { animation : name duration timing-function delay it...
复制链接

扫一扫