animation动画

布织锁云

于 2023-03-22 16:25:31 发布

阅读量256

点赞数

文章标签：动画 css3 css

本文链接：https://blog.csdn.net/qq_52731478/article/details/129709064

版权

设定动画

1.定义动画(css)

@keyframes 动画名称{
	0%{
		动画开始时的样式
	}
	100%{
		动画结尾时的样式
	}
}

或者
@keyframes 动画名称{
	from{
		动画开始时的样式
	}
	to{
		动画结尾时的样式
	}
}

2.使用动画(css)

.类名{
	animation: 动画名称	动画时长	运动曲线	延迟时间;	
	/* 动画名称(animation-name) */
	/* 动画时长(animation-duration) */
	/* 动画曲线（animation-timing-function）：
	linear匀速；ease慢-快-慢（默认值）；
	ease-in慢进快出；
	ease-out快进慢出；
	ease-in-out慢-快-慢 ;
	steps(步数[，state|end])  步长     start看不到第一帧 end看不到最后一帧
	
	*/
	/* 延迟时间(animation-delay) */
	
	animation-direction: ;		
	/*循环方向：normal  默认值；reverse 反向运行；ternate  正-反-正；alternate-reverse  反-正-反*/
	
	animation-iteration-count: ;
	/*循环次数：infinite无限循环*/
	
	animation-fill-mode: ;
	/*
	动画等待或者结束的状态:
		forwards：动画结束后，元素样式停留在 100% 的样式(保留最后一帧的状态)
		backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式(回跳到保留第一帧时的状态)
		both： 同时设置了 forwards和backwards两个属性值
	*/
	
	animation-play-state: ;
	/*播放暂停设置：running 播放   paused 暂停*/
}

步长动画

文字步长动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				overflow: hidden;
				width: 0px;
                /* width: 240px; */
				height: 30px;
                line-height: 30px;
				font-size: 24px;
				background-color: aqua;
                    /*文字不换行*/
				animation: ps_move 4s steps(10,start) alternate infinite forwards;
				/*步长值（即步数）=p元素宽度/每个文字的大小*/
			}
			
			@keyframes ps_move{
				100%{
					width: 240px;
				}
			}
		</style>
	</head>
	<body>
		<div>一步一步是魔鬼的步伐</div>
	</body>
</html>

图片步长动画

原图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 原图宽度1600px，高度100 ，8个不同状态的小熊，将图片放在box中*/
        /* 即步长为8，box宽度为: 原图宽度/步长=200px*/

        .box{
            width: 200px;
            height: 100px;
            overflow: hidden;
        }
        .box img{
            animation: imgActive 2s steps(8) infinite;
        }
        @keyframes imgActive{
            100%{
                margin-left: -1600px;
            }
        }
    </style>
  </head>
  <body>
    <div class="box">
        <img src="./img/bear.png" alt="" />
    </div>
  </body>
</html>

小熊步长动画