[分享]css中定义动画的语句

在CSS中定义动画是非常常见的操作，可以让网页更加生动、有趣，吸引用户的注意力。在定义动画的语句中，有几个关键词需要注意，分别是keyframes、animationduration、animatio...

在CSS中定义动画是非常常见的操作，可以让网页更加生动、有趣，吸引用户的注意力。在定义动画的语句中，有几个关键词需要注意，分别是@keyframes、animation-duration、animation-timing-function、animation-delay以及animation-iteration-count。下面我们将逐一介绍与展示代码：

@keyframes myAnimation {   /* 定义动画 */
    from {background-color: red;}
    to {background-color: blue;}
} 

上面的代码片段中，我们定义了一个名为myAnimation的动画，其中from表示动画开始时的状态，to表示动画结束时的状态。该动画会使元素从红色的背景色变为蓝色的背景色。接下来我们可以将这个动画应用到我们页面中的元素上：

div {
    width: 100px;
    height: 100px;
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
} 

上述代码中，我们将上面定义的myAnimation动画应用到了一个div元素上。我们设置了元素的宽度和高度，然后设置了动画的一些属性值：

• animation-duration表示动画的持续时间，默认值为0s。
• animation-timing-function表示动画的时间曲线，默认值为ease。
• animation-delay表示动画延迟的时间。
• animation-iteration-count表示动画重复的次数，默认值为1，设置为infinite则表示无限次。

这样，当我们在页面中使用这个div元素时，就会看到它按照我们设置的动画从红色变为蓝色，且动画会重复播放。