入门-animation的属性值

最新推荐文章于 2024-07-11 10:30:31 发布

sunny向天

最新推荐文章于 2024-07-11 10:30:31 发布

阅读量445

点赞数

文章标签： css html5 html css3

本文链接：https://blog.csdn.net/m0_46387675/article/details/104733986

版权

本文介绍了CSS3的animation属性，包括animation-name、animation-duration、animation-delay、animation-timing-function、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。详细解释了各个属性的作用，并提供了示例，帮助理解如何创建和控制CSS3动画。

摘要由CSDN通过智能技术生成

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>

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