CSS3新增特性 animation属性

最新推荐文章于 2024-05-15 10:37:51 发布

陈醋拌饭

最新推荐文章于 2024-05-15 10:37:51 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/weixin_44167504/article/details/108367966

版权

css3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

CSS3 animation属性

使用格式： animation: name duration timing-function delay iteration-count direction fill-mode;
作用：通过给元素添加animation属性，可以赋予该元素动画效果。
使用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            width: 500px;
            height: 500px;
            background-color: gold;
            /* ease一次 ，infinite无限次 */
            animation: fedem 4s infinite;
            -webkit-animation: fedem 4s infinite;
            -moz-animation: fedem 4s infinite;
            -o-animation：fedem 4s infinite;
            -ms-animation：fedem 4s infinite;
            animation-fill-mode:both;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }

        @keyframes fedem{
            0%{
                opacity: 0;
            }
            50%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

常用的几种属性

（1）animation-name(动画名称）
animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。

（2）animation-duration(动画执行一次所需时间)
animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。

（3）animation-delay(动画在开始前的延迟时间)
animation-delay的值可以是秒（s）或者是毫秒（ms）,默认值是0，没有延迟。

（4）animation-timing-function(动画以何种运行轨迹完成一个周期)
animation-timing-function的值是贝塞尔曲线，默认值是ease,表示动画以低速开始，然后加速，最后在结束前变慢。

最常用的值有以下几个：

（a）linear:表示动画从头到尾的速度都是相同的。

（b）ease-in:表示动画以低速开始。

（c）ease-out:表示动画以低速结束。

（d）ease-in-out:表示动画以低速开始和结束。

（5）animation-iteration-count(动画播放次数)

属性值有两种：

（a）直接写数字，自定义想要播放动画的次数。

（b）infinite：设置动画无线循环播放。

（c）ease：设置动画执行一次

（6）animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

默认值为none，表示不会在动画结束或者未开始时给元素添加样式

常用属性值为：

（a）forwards:表示动画结束后，元素直接接使用当前样式（动画保持在动画最后一帧的样式，最后一个关键帧取决于animation-direction和animation-iteration-count的值）

（b）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时），动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值，元素保持为第一帧中的状态

（c）both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性，动画停留在最后一个关键帧中定义的状态

参考：animation动画中forwords和both的区别

animation-direction:定义是否循环交替反向播放动画

属性值：

参考：css3中的animation属性

陈醋拌饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增特性 animation属性

CSS3 animation属性使用格式： animation: name duration timing-function delay iteration-count direction fill-mode;作用：通过给元素添加animation属性，可以赋予该元素动画效果。使用实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
复制链接

扫一扫

专栏目录