css关键帧动画效果 

帧动画
1）定义关键帧
    @keyframes 动画名称（英文）{
        0%{  }  动画的开始
        50%{ }
        100%{ } 动画的结束
    }
    @keyframes 动画名称（英文）{
        from{ } 动画的开始
        to{ } 动画的结束
    }

2）引用关键帧
    animation: animation-name animation-duration [animation-timing-funciton] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
  
    animation: 动画名称 动画的执行时间（s|ms） 动画的类型(linear|ease|ease-in|ease-out|ease-in-out) 延迟时间 播放次数(默认为1次,infinite无限循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束之后显示的状态(forwards动画结束时的状态|both动画结束或开始时的状态|backwards动画开始时的状态)
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.wrap {
				float: left;
				width: 400px;
				height: 400px;
				border: 2px solid #000;
				border-radius: 20px;
				margin: 0 10px 10px 0;

				position: relative;
			}

			.wrap div {
				width: 40px;
				height: 40px;
				background: pink;
				border-radius: 50%;

				position: absolute;
				left: 0;
				top: 0;

				/* 第二步：引用关键帧： */
				animation: run 3s;
			}

			.wrap2 div {
				animation: run 3s linear;
			}

			.wrap3 div {
				animation: run 3s linear 1s;
			}

			.wrap4 div {
				animation: run 3s linear 3;
				animation: run 3s linear infinite;
			}

			.wrap5 div {
				animation: run 3s linear infinite alternate;
				animation: run 3s linear infinite normal;
			}

			.wrap6 div {
				animation: run 3s linear infinite reverse;
				animation: run 3s linear infinite alternate-reverse;
			}

			.wrap7 div {
				animation: change 3s both;
				animation: runScale 3s both;
			}

			.wrap8 div {
				animation: change 3s forwards;
				animation: change 3s backwards, run 3s;
				animation: change 3s forwards, run 3s;
				/* animation: change 3s backwards; */
				animation: runs 3s forwards;
			}

			/* 第一步：定义关键帧： */
			@keyframes run {
				0% {
					left: 0;
					top: 0;
				}

				25% {
					left: 360px;
					top: 0;
				}

				50% {
					left: 360px;
					top: 360px;
				}

				75% {
					left: 0;
					top: 360px;
				}

				100% {
					left: 0;
					top: 0;
				}
			}

			/* @keyframes change {
		            0%{
		                left: 0;
		                top: 0;
		                background: pink;
		            }
		            50%{
		                left: 300px;
		                top: 100px;
		            }
		            70%{
		                left: 300px;
		                top: 100px;
		            }
		            100%{
		                left: 200px;
		                top: 300px;
		                background: yellow;
		            }
		        } */
			@keyframes runs {
				0% {
					transform: scale(1);
				}

				100% {
					transform: scale(3);
				}
			}

			@keyframes runScale {
				from {
					transform: scale(1);
				}

				to {
					transform: scale(3);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div></div>
		</div>
		<div class="wrap wrap2">
			<div></div>
		</div>
		<div class="wrap wrap3">
			<div></div>
		</div>
		<div class="wrap wrap4">
			<div></div>
		</div>

		<div class="wrap wrap5">
			<div></div>
		</div>
		<div class="wrap wrap6">
			<div></div>
		</div>
		<div class="wrap wrap7">
			<div></div>
		</div>
		<div class="wrap wrap8">
			<div></div>
		</div>
	</body>
</html>

效果截图

 

posted @ 2023-06-08 15:23  JackieDYH  阅读(52)  评论(0)  编辑  收藏  举报  来源