11CSS3动画

最新推荐文章于 2023-05-04 18:09:23 发布

远近2021

最新推荐文章于 2023-05-04 18:09:23 发布

阅读量127

点赞数

分类专栏： # css3学习 htmlcss学习园地文章标签： css3

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119617624

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 7 订阅

订阅专栏

css3学习

25 篇文章 3 订阅

订阅专栏

文章目录

1、`@keyframes`规则
2、过渡的速度曲线`animation-timing-function`
3、`animation-delay`
4、 `animaiton-iteration-count`
5、`animation-direction`
6、`animation-fill-mode`属性
7、animation-play-state属性
8、示例

动画是使元素从一种样式逐渐变化为另一种样式的效果。和过渡相比，动画不需要事件激发。在 CSS3 中，我们可以创建动画，取代以往的网页动画图象。

1、`@keyframes`规则

在 CSS3 标准下，我们使用 @keyframes 规则来创建动画。@keyframes规则内指定⼀个CSS样式和动画将逐步从⽬前的样式更改为新的样式。
语法：

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

在这里插入图片描述
我们无需将动画的每一帧都描绘出来，只需要给出变化的关键帧，然后给出变化时间，其余的等待它自动计算完成就可以了。 @keyframes 里描述了动画的关键帧的相关属性，语法如下：

@keyframes 动画名称 {
  0% {
    /*css code 描述关键帧属性*/
  }
  25% {
    /*css code 描述关键帧属性*/
  }
  50% {
    /*css code 描述关键帧属性*/
  }
  75% {
    /*css code 描述关键帧属性*/
  }
  100% {
    /*css code 描述关键帧属性*/
  }
}

动画创建完成后，我们使用 animation 属性将动画绑定到对应的元素上去，并给出运行时间，就完成了一个简单的动画。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes myfirstcartoon {
            0% {
                background-color: lightgreen;
            }
            25% {
                background-color: blue;
            }
            50% {
                background-color: orange;
            }
            75% {
                background-color: red;
            }
            100% {
                background-color: yellow;
            }
        }
        body {
            animation: myfirstcartoon 5s ;
        }
    </style>
</head>
<body>
</body>

在 Preview 或 Mini Browser 中打开，观察网页的变化。
在这里插入图片描述

2、过渡的速度曲线`animation-timing-function`

CSS3 动画还有很多有趣的属性：

animation：动画属性的简写属性，除了 animation-play-state 属性。
animaiton-name：规定@keyframes 动画的名称。
animation-duration：规定动画一个周期的时间，默认为 0。
animaiton-timing-function：规定动画的速度曲线。默认为 ease。

3、`animation-delay`

animaiton-delay：规定动画的播放延迟时间。允许负值，例如-2s 使动画⻢上开始，但跳过 2 秒进⼊动画。

4、 `animaiton-iteration-count`

animaiton-iteration-count：规定动画播放次数，默认为1。取值为 infinite 时，动画被无限次播放。

5、`animation-direction`

animation-direction：规定动画是否在下一周期逆向播放（定义是否循环交替反向播放动画），默认为normal。取值为 normal 时，动画正常播放，取值为 alternate 时，动画轮流反向播放。
注意：如果动画被设置为只播放⼀次，该属性将不起作⽤。

6、`animation-fill-mode`属性

animation-fill-mode：规定动画在播放之前或之后，其动画效果是否可见。取值为 none 时，不改变默认行为；取值为forwards 时，在动画完成后，保持最后一个属性；取值为 backwards 时，在动画开始之前应用开始属性值；取值为 both时，向前向后的模式都将被启用。

将上述的的animation修改成如下：

animation: myAnimation 5s linear 2s forwards;

在这里插入图片描述

animation: myAnimation 5s linear 2s backwards;

在这里插入图片描述

animation: myAnimation 5s linear 2s both;

在这里插入图片描述

7、animation-play-state属性

animation-play-state：规定动画是否正在运行或暂停，默认为 running；暂停时为 paused。

8、示例

我们可以使用 animaiton 来简写动画的这些属性：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes myfirstcartoon {
            0% {
                background-color: lightgreen;
            }
            25% {
                background-color: blue;
            }
            50% {
                background-color: orange;
            }
            75% {
                background-color: red;
            }
            100% {
                background-color: yellow;
            }
        }
        body {
            animation: myfirstcartoon 5s ease-in-out 1s infinite alternate;
            /*上述值分别对应了：name duration timing-function delay iteration-count direction*/
        }
    </style>
</head>
<body>
</body>