欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css动画+帧动画

程序员文章站 2022-03-27 17:10:50
...

动画: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;

相关标签: 前端css css