css动画+帧动画

最新推荐文章于 2023-12-10 00:00:00 发布

StefanieLap

最新推荐文章于 2023-12-10 00:00:00 发布

阅读量437

点赞数

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

本文链接：https://blog.csdn.net/weixin_45605549/article/details/109457396

版权

前端css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

动画：animation

设置关键帧

<style type="text/css">
			#d1{
				width: 200px;
				height: 200px;
				background: pink;
				animation: donghua1 3s;
			}
			
			@keyframes donghua1{
				/* from{} 等同于0%{}，最开始*/
				0%{
					transform: translate(0,0);
				}
                /* 一共三秒，第一秒*/
				33.3%{
					transform: translate(500px,0);
				}
				/* to{}等同于100%{}，最后 */
				100%{
					transform: translate(500px,400px);
				}
			}
		</style>

从左上，到右上，到右下的动画

上面是系统性动画属性，下面拆分：

               animation:综合性的动画设置属性
               animation-name:动画名称
               animation-duration:动画的时间周期
               animation-timing-function:动画变化的速度，默认ease，linear,ease-in,ease-out,也可是设置贝塞尔曲线
               animation-delay:延迟时间
               animation-iteration-count:动画循环次数,infinite无限循环
               animation-direction:运动的方向,normal默认值，alternate奇数次正常运动，偶数次反方向运动，reverse,都是反方向运动，终点是起始点，alternate-reverse奇数次反方向偶数次正方向运动
               animation-fill-mode: forwards;使得动画保留最后一帧的效果

制作一个loading动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.loading{
				margin: 0 auto;
				width: 300px;
				height: 300px;
				position: relative;
			}
			.loading .circle{
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
				animation-timing-function: linear !important;
			}
			.small{
				width: 30px;
				height: 30px;
				background: deepskyblue;
				margin: 10px auto;
				border-radius: 15px;
				
			}
			
			@keyframes loading{
				from{
					opacity: 1;
				}
				to{
					opacity: 0.1;
				}
			}
			
			.loading .circle:nth-child(1){
				transform: rotate(45deg);
				animation: loading 0.9s infinite;
			}
			.loading .circle:nth-child(2){
				transform: rotate(90deg);
				animation: loading 0.9s infinite 0.1s;
			}
			.loading .circle:nth-child(3){
				transform: rotate(135deg);
				animation: loading 0.9s infinite 0.2s;
			}
			.loading .circle:nth-child(4){
				transform: rotate(180deg);
				animation: loading 0.9s infinite 0.3s;
			}
			.loading .circle:nth-child(5){
				transform: rotate(225deg);
				animation: loading 0.9s infinite .4s;
			}
			.loading .circle:nth-child(6){
				transform: rotate(270deg);
				animation: loading 0.9s infinite .5s;
			}
			.loading .circle:nth-child(7){
				transform: rotate(315deg);
				animation: loading 0.9s infinite .6s;
			}
			.loading .circle:nth-child(8){
				transform: rotate(360deg);
				animation: loading 0.9s infinite .7s;
			}
			
			
		</style>
	</head>
	<body>
		<!-- .loading>(div.circle>.small)*8 -->
		<div class="loading">
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
		</div>
	</body>
</html>

帧动画：step（帧数）

animation: lxw 2s steps(16) infinite;

StefanieLap

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css动画+帧动画

动画：animation设置关键帧<style type="text/css"> #d1{ width: 200px; height: 200px; background: pink; animation: donghua1 3s; } @keyframes donghua1{ /* from{} 等同于0%{}，最开始*/ 0%{ transform: translate(0,0); }
复制链接

扫一扫