移动端第十一章动画

最新推荐文章于 2022-09-22 10:46:22 发布

LW0512

最新推荐文章于 2022-09-22 10:46:22 发布

阅读量157

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108928567

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了CSS动画属性，包括animation-name、animation-duration、animation-timing-function等，并通过实例展示了如何创建和控制动画。文章还介绍了关键帧(@keyframes)的使用，以及如何实现复杂的元素动态效果。同时，文中提供了暂停和改变动画方向的交互示例，帮助读者理解CSS动画的实用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画

动画属性：animation

animation-name:动画的名字
animation-duration:动画完成一个周期所花费的时间(秒/毫秒)
animation-timing-function:动画的速度曲线
(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)
animation-delay:动画何时开始
animation-iteration-count:动画被播放的次数 number/infinite(无限循环) 
animation-direction:动画是否在下一周期逆向的播放  normsl/alternate(反向播放)
animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放)
animation-fill-mode:动画时间之外的状态 （和延迟连用 ）
		--	 forwards(保留动画结束时的状态) 
		--	backwards(不会保留动画结束时的状态)
		--	both(上面两种状态都有)

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				/*动画名字（动画的名字要有语义化）*/
				/*animation-name:movedh ;*/
				/*动画完成的时间*/
				/*animation-duration: 1s;*/
				/*动画播放次数*/
				/*animation-iteration-count: 3;*/
				/*animation-iteration-count: infinite;*/
				/*综合写法*/
				animation: movedh 1s 2s infinite;
				
			}
			div:hover{
				/*播放/暂停*/
				animation-play-state:paused;
			}
			/*关键帧*/
			@keyframes movedh{
				from{
					width: 100px;
				}
				to{
					width: 1000px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

规定动画

@keyframes name{
	from{}
	to{}
}
@keyframes name{
	0%{}
	10%{}
	20%{}
	30%{}
	40%{}
	50%{}
	60%{}
	70%{}
	100%{}
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap{
				width: 500px;
				height: 500px;
				border: 1px solid red;
				margin: 100px auto;
				position: relative;
			}
			.box{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
				animation: movedh 2s infinite alternate;
			}
			@keyframes movedh{
				0%{
					left:0;
					top:0;
				}
				25%{
					left:400px;
					top:0;
					border-radius:50% ;
					background: -webkit-linear-gradient(red,blue);
				}
				50%{
					left:400px;
					top:400px;
				}
				75%{
					left:0px;
					top:400px;
					border-radius:50% ;
				}
				100%{
					left:0px;
					top:0;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box"></div>
		</div>
	</body>
</html>