HTML CSS动画

什么是CSS 动画？

动画是元素逐渐从一种样式变为另一种样式。

您可用随意更改任意数量的CSS属性。

如需使用CSS动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes规则

如果您在@keyframes规则中指定了CSS样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

延迟动画

animation-delay 属性规定动画开始的延迟时间。

示例1：

div {

            width: 100px;

            height: 100px;

            position: relative;

            background-color: red;

            animation-name: example;

            animation-duration: 4s;

            animation-delay: 2s;

        }

示例1中，在开始动画前有2秒的延迟 。

负值也是可以的，如果使用负值，则动画将开始播放，如同已播放，如同已播放N秒。

示例2：

div {

            width: 100px;

            height: 100px;

            position: relative;

<