CSS动画

最新推荐文章于 2024-08-31 09:24:27 发布

依墨~

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量97

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/m0_62073591/article/details/125937969

版权

1.动画

1.1什么是CSS动画

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

您可以随意更诚任意数量的CSS属性。

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

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

2.2@keyframes规则

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

要使动画生效,必须将动画绑定到菜个元索。

 /* 定义的动画规则 */
<style>
    	/*div_animaion* 自定义动画名/
        @keyframes div_animation {
                    from{
                        margin-left: 0;
                    }
                    to{
                        margin-left: 500px;
                    }
            }
</style>

5.3指定动画填充模式

CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。 animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时(在开始之前，结束之后，或两者都结束时)，animation-fill-mode属性规定目标元素的样式。

animation-fill-mode属性可接受以下值:

none-默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards-元素将保留由最后一个关键帧设置的样式值(依赖animation-direction和animation-iteration-count).

backwards-元素将获取由第一个关帧设置的样式值（取决于animatian-direction)，并在动画延迟期间保留该值。

both-动画会同时逶循向前和向后的规则，从而在两个方向上扩展动画属性。

5.4延迟动画

animation-delay：属性规定动画的延迟时间（负值也是允许的如果使用负值，则动画将开始播放如同以播放N秒）

5.5反向或交替运行动画

animation-direction属性指定是向前播放、向后摇放还是交替播放动画。

animation-direction底性可接受以下值: normal-动画正第播放(向前)。默认值

reverse动画以反方向播放〔向后）

alternate-动画先向前播放，然后向后

alternate-reverse-动画先向后播放,然后向前

5.6指定动画的速度曲线

animation-timing-function属性规定动画的速度曲线。

animation-timing-function属性可接受以下值:

ease-指定从慢速开始,然后加快,然后缓慢结束的动画(默认)

linear 规定从开始到结束的速度相同的动画

ease-in 规定慢速开始的动画

ease-out 规定慢速结束的动画-

ease-in-out-指定开始和结束较慢的动画

cubic-bezier(n,n,n,n)·运行您在三次贝塞尔函数中定义自己的值

示例代码：

<style>
        .div_1{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            /* 应用动画 */
            /*animation-name: div_animation; 指定动画名称*/
            /*animation-duration: 4s;动画持续时间*/
            /*animation-fill-mode: forwards; 动画填充模式，forwards的作用是将动画的样式停留在最后一个*/
            /* animation-delay:动画延迟的时间，当值为负数时表示执行了多长时间*/
            /* animation-delay: 2s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(.97, .08,.35, .72); */	
            /*简写方法*/
            animation: div_animation 4s forwards alternate infinite cubic-bezier(.97,.08,.35,.72);
        }
        /* 定义的动画规则 */
        @keyframes div_animation {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
            /* 25%{
                background-color: red;
            }
            50%{
                background-color: green;
            }
            75%{
                background-color: yellow;
            }
            100%{
                background-color: black;
            } */
        }
    </style>
</head>
<body>
    <div class="div_1"></div>
</body>