逆战班-animation的属性值

2024-03-09 16:14:59

animation的属性值

animation动画属性 VS transition过渡属性

相同点：二者都是随着时间改变元素的属性值

不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性,表现为初始效果——最终的效果之间的变化；

animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值，表现为初始效果———动画帧———动画帧————最终的效果

1.animation-name(必要的）

作用：检索或设置对象所应用的动画名称

必须与规则@keyframes配合使用，

定义关键帧：

@keyframes mymove{} animation-name:mymove;

名字要与@keyframes后的保持一致

语法一：@keyframes mymove{

from{初始状态属性}

to{结束状态属性}

}

语法二：@keyframes mymove{

0%{初始状态属性}

100%{结束状态属性}

}

0% = from ; 100% = to,语法二可以定义0-100%过程中的任一关键帧，例如

@keyframes mymove{

0%{初始状态属性}

50%{状态1}

60%{状态2}

100%{结束状态属性}

}

此时运行不会出现动画的效果，需要设置动画持续的时间，此时需要第二个属性值duration

2.animation-duration (必要的)

检索或设置对象动画的持续时间（单位s,ms）

说明：animation-duration:2s; 动画完成使用的时间为2s

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 2s;
			}
			@keyframes move{
				from{ transform: translateX(0);}
				to{ transform: translateX(200px);}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

效果如下所示，刷新页面后动画可自动按照设置的运动形式动起来，不用鼠标触发

定义多个关键帧的代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 4s;
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

3.animation-delay

检索或设置对象动画延迟的时间（单位s,ms）
说明：animation-delay:1s; 动画开始前延迟的时间为1s)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 4s;
				animation-delay:1s;
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

延时1S执行动作，效果如下图左显示，animation-delay还可以设置负值，例如animation-delay：-2s;表示过程提前执行2秒，刷新后直接从2秒后开始运动，如下图右所示。

4.animation-timing-function

检索或设置对象动画的过渡类型

属性值：
            linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
            ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
           ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
           ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
           ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
           step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

例如设置ease-in，由慢到快运动，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 4s;
				/*animation-delay:-2s;*/
				animation-timing-function:ease-in;
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

可以通过贝塞尔曲线 *设置贝塞尔曲线的值，达到自己想要的过渡类型。

5.animation-iteration-count

检索或设置对象动画的循环次数
属性值：
           animation-iteration-count: infinite | number;
           infinite：无限循环
           number: 循环的次数，填写数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 2s;
				/*animation-delay:-2s;*/
				animation-timing-function:ease-in;
				animation-iteration-count:2;
				/*animation-iteration-count:infinite;*/
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

以下左图为循环2次，右图为无限循环

6.animation-direction

检索或设置对象动画在循环中是否反向运动
属性值：
           normal：正常方向 0% —— 100%（默认）
           reverse：反方向运行 100% —— 0%
           alternate：动画先正常运行再反方向运行，并持续交替运行 0% —— 100% —— 0%；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行 100% —— 0% —— 100%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 2s;
				/*animation-delay:-2s;*/
				animation-timing-function:ease-in;
				/*animation-iteration-count:2;*/
				animation-iteration-count:infinite;
				/*animation-direction: alternate;*/
				animation-direction: alternate-reverse;
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

以下左图为先正向运动再反向运动，右图为先反向运动再正向运动

7.animation-fill-mode

说明：规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置（重点）
both : backwards和forwards同时生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:50px;
				height:50px;
				background:#f00;
				margin-bottom:20px;
				border-radius: 50%;
				text-align: center;
				animation-name: play;
				animation-duration :3s;
				animation-delay:2s;
				animation-timing-function:linear;				
			}
			div:nth-child(1){
				animation-fill-mode:none; /* 延迟之后执行0%时里面的效果 */
			}
			div:nth-child(2){				
				animation-fill-mode:backwards;/* 延迟之前执行0%时里面的效果 */
			}
			div:nth-child(3){				
				animation-fill-mode:forwards;/* 动画结束后 ，就停留在结束的位置 */
			}
			div:nth-child(4){				
				animation-fill-mode:both;/* 动画结束后 ，就停留在结束的位置 */
			}
			@keyframes play{
				0%{ transform: translate(0,0);background: #0000FF;}
				100%{ transform: translate(300px,0);}
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

8.animation-play-state

检索或设置对象动画的状态
属性值：
            animation-play-state:running | paused;
   running:运动 (默认值)
            paused: 暂停
            注：该属性是通过鼠标某些事件时添加的；animation-play-state:paused;
   当鼠标经过时动画停止，鼠标移开动画继续执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:100px;
				height:100px;
				background:#f00;
				animation-name: move;
				animation-duration: 4s;
				/*animation-delay:-2s;*/
				animation-timing-function:ease-in;
				/*animation-iteration-count:2;*/
				animation-iteration-count:infinite;
				/*animation-direction: alternate;*/
				animation-direction: alternate-reverse;
			}
			.box:hover{
				animation-play-state:paused;
			}
			@keyframes move{
				0%{ transform: translate(0,0);background: red; }
				25%{ transform: translate(300px,0);background: yellow;}
				50%{ transform: translate(300px,300px);background: green;}
				75%{ transform: translate(0,300px);background: blue;}
				100%{ transform: translate(0,0);background: red;}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

码农公寓

逆战班-animation的属性值

animation的属性值

animation动画属性 VS transition过渡属性

以上为animation的属性值，仅供参考。

码农公寓

animation的属性值

animation动画属性 VS transition过渡属性

以上为animation的属性值 ，仅供参考。

相关文章

以上为animation的属性值，仅供参考。