css动画

-Food流油

已于 2024-05-11 17:16:05 修改

阅读量262

点赞数 5

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

于 2024-05-05 13:00:51 首次发布

本文链接：https://blog.csdn.net/Lan_0316/article/details/138462426

版权

css动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、定义动画的关键帧
二、应用动画 - 简写
三、应用动画的各个属性
四、伴随动画而产生的3个事件
五、无缝隙滚动案例

前言

css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼

一、定义动画的关键帧

关键帧 @keyframes 通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes 动画名称{
	from { Properties:Properties value; }
	百分比 { Properties:Properties value; }
	....
	to { Properties:Properties value; }
}

@keyframes 动画名称{
	0% { Properties:Properties value; }
	百分比 { Properties:Properties value; }
	....
	100% { Properties:Properties value; }
}

二、应用动画 - 简写

animation: 动画名称 时长 动画速度 延迟 执行次数 执行方向;

三、应用动画的各个属性

animation-name: 动画名称；
animation-duration: 动画时长；
animation-timing-function: 定义动画的速度

linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 快-慢-快。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay: 延迟时间；
animation-iteration-count: 10;//表示动画执行10次 | infinite; // 表示无限次循环
定义动画执行多少次；
animation-direction: ; // 定义动画的执行方向

normal:默认值，执行完毕之后瞬间恢复最初始状态；
reverse:动画反向执行；
alternate:动画正向执行完毕，在反向执行动画；
注意：设置此属性之后正向算一次动画反向算一次动画，所以如果设置动画执行1次，此属性值不生效；
alternate-reverse:动画先反向执行，在正向执行；
注意：设置此属性之后反向算一次动画正向算一次动画，所以如果设置动画执行1次，只会执行反向一次动画；

animation-fill-mode: 定义动画的终止状态

一个动画执行完毕的默认状态是什么？就是初始状态！
forwards: 应用动画的最终状态;
backwards: 在delay延迟期间，应用你定义的第一帧的状态;

animation-play-state: 控制动画的执行状态

paused 	 指定暂停动画;
running	 指定正在运行的动画;

四、伴随动画而产生的3个事件

animationstart 动画开始事件；
animationiteration 动画反复执行事件；

动画反复执行事件需要指定animation-iteration-count属性，如果值为1，	则不触发反复执行事件！

animationend 动画结束事件；

box.addEventListener('animationstart',function(){
	console.log('start') //动画开始
},false)
box.addEventListener('animationend',function(){
	console.log('end') //动画结束
},false)
box.addEventListener('animationiteration',function(){
	console.log('反复') //动画反复执行
},false)

五、无缝隙滚动案例

无缝隙滚动

<!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>
		* {
			margin:0;
			padding:0;
		}
		
		.show{
			width: 600px;
			height: 150px;
			padding: 10px;
			margin: 40px auto;
			border: 2px solid #ccc;
			overflow: hidden;
			position: relative;
		}
		.show .mask{
			position: absolute;
			height: 100%;
			width: 10px;
			right: 0;
			background-color: #fff;
		}
		.list{
			list-style: none;
			height: 150px;
			width: 1200px;
		}
		.list li{
			width: 150px;
			height: 150px;
			border: 1px solid red;
			box-sizing: border-box;
			line-height: 148px;
			text-align: center;
			font-size: 34px;
			font-weight: bold;
			float: left;
		}

		@keyframes move {
			100% {
				transform: translateX(-600px);
			}
		}
		.list{
			animation: move 5s linear;
			animation-iteration-count: infinite;
		}
	</style>
</head>
<body>
	<div class="show">
		<!-- <div class="mask"></div> -->
		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
</html>