css3---动画animation_animation每5s中执行一次-CSDN博客

本文链接：https://blog.csdn.net/weixin_44976833/article/details/99055253

css3—动画animation

用法：先在css中定义动画函数，然后给目标元素调用动画函数

例如：

css:
<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: move 2s linear 2s infinite alternate forwards;
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(500px,0);
            }
            50% {
                transform: translate(500px,500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0,0);
            }
        }
    </style>
html:
	<body>
    	<div></div>
	</body>

动画序列：

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

1. 动画animation的属性

在这里插入图片描述

综合写法

animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

前边的两个属性必须写，后边的可以省略；综合写法里边不包含animation-play-state：paused(暂停)，和鼠标经过时配合使用

1.1 详解animation

1.1.1 动画名

设置要使用的·动画名 animation-name:xxx;

1.1.2 持续时间

设置动画播放的持续时间 animation-duration:5s;

1.1.3 速度曲线

animation-timing-function:linear;

linear:匀速；ease:慢–快--慢；ease-in:慢–快；ease-out:快–慢；ease-in-out:慢–快--慢；steps():指定了时间函数中的间隔数量

1.1.4 延时时间

animation-delay:10s;

1.1.5 循环次数

设置动画播放次数 animation-iteration-count:5; 可以设置数字，也可以设置infinite(无限循环)

1.1.6 循环方向

animation-direction:normal;

若动画中定义了0%：绿色; 100%:蓝色；

normal:默认值绿–蓝；

resverse:反向蓝–绿

alternate 正–反--正绿–蓝--绿

alternate-reverse 反–正--反蓝–绿--蓝

**注意：**以上与次数有关，交替的话，循环次数至少2，才能进行往返交替

1.1.7 动画等待与结束时的状态

animation-fill-mode:设置动画在结束或者等待时的状态默认是backwards(动画结束时回到初始状态)；

forwards:动画结束后元素停止在100%的样式；

backwards:元素停留在0%的样式

both:同时设置以上两个属性

1.1.8 暂停与播放

animation-play-state：控制播放或者暂停（running播放、paused暂停）