web前端html和css笔记4——关键帧

爱喝橙汁的兔兔～

已于 2022-11-13 10:32:00 修改

阅读量303

点赞数

分类专栏： web前端文章标签： css html 前端

于 2022-11-13 09:58:15 首次发布

本文链接：https://blog.csdn.net/weixin_46039828/article/details/127827329

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

web前端html和css笔记4——关键帧

文章目录

web前端html和css笔记4——关键帧
CSS animation 属性

CSS animation 属性

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name :规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认留个参数的值是：none 0 ease 0 1 normal

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			.box {
				position: relative;
				width: 200px;
				height: 150px;
				border: 2px solid red;
				/* 
				 animation-name:move 绑定到选择器的 keyframe 名称是移动
				 animation-duration：10s 完成动画所花费的时间10s
				 animation-timing-function：linnear 规定动画的速度曲线：线性
				 animation-delay:规定在动画开始之前的延迟：默认0 延迟
				 animation-iteration-count：规定动画应该播放的次数：infinite无限次循环
				 animation-direction：规定是否应该轮流反向播放动画默认：normal 不返向
				 */
				animation: move 10s linear infinite;
			}



			@keyframes move {
				/* 在进度为0%的时候的状态 */
				0% {
					left: 0;
					top: 0;
					border-color: red;
				}
				
				/* 在进度为25%的时候的状态：left变成500px，可见往右跑了 */
				25% {
					left: 500px;
					top: 0;
					border-radius: 0;
					border-color: red;
				}

				/* 在进度为50%的状态
				 top变成300px，可见往后跑了
				 border-radius变成50%，可见变成圆角了*/
				50% {
					top: 300px;
					left: 500px;
					border-color: #00a2e8;
					border-radius: 50%;
				}

				/* 在进度为75%的状态
				 left又变成0，可见往左跑了
				 圆角依然不变*/
				75% {
					left: 0;
					top: 300px;
					border-color: #00a2e8;

				}
				
				/* 进度变成100% 恢复到0状态 */
				100% {
					top: 0;
					left: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
		</div>
	</body>
</html>