CSS - animation 属性

CSS animation 是一个简写属性，用于定义以下属性的值：animation-composition、animation-delay、animatiom-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state 和 animation-timing-function。

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state composition;

属性值

值	描述
animation-composition	指示当多个动画对同一属性同时产生影响时要应用的复合操作。
animation-delay	指示动画是否应从动画的开头开始或在某个过程中开始，以及元素加载与动画序列开始之间应经过多长时间。
animation-direction	指示动画的初始迭代是向前还是向后，以及之后的迭代是否应沿相同方向继续或每次执行序列时都改变方向。
animation-duration	指示动画完成一个循环需要多长时间。
animation-fill-mode	描述动画应用于其目标的预运行和后运行样式。
animation-iteration-count	指示动画应重复多少次。
animation-name	它给出描述动画关键帧的 @keyframes at-rule 的名称。
animation-play-state	指示动画序列应播放还是暂停。
animation-timing-function	描述用于指定动画中关键帧过渡的加速曲线。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS 动画属性示例

以下示例显示了 animation 属性的用法。

具有多个值的动画属性

由于 animation 属性是一个简写属性，因此可以使用它在一个声明中设置许多其他属性。在以下示例中，使用了五个属性 animation-name、animation-duration、animation-timing-function、animation-delay 和 animation-iteration-count。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      @keyframes slideIn {
         from {
               transform: translateX(0%);
         }
         to {
               transform: translateX(400%);
               border-radius: 50%;
               background-color: green;
         }
      }

      .animated-box {
         width: 100px;
         height: 100px;
         animation: slideIn 2s ease-in-out 1s infinite;
      }
   </style>
</head>

<body>
   <h2>
      CSS animation property
   </h2>
   <div class="animated-box"></div>
</body>

</html>

支持的浏览器

属性
animation	43.0	10.0	16.0	9.0	30.0

css_properties_reference.htm

打印页面

上一个

下一个