transition过渡&&animation动画

最新推荐文章于 2024-04-22 09:30:00 发布

恬淡如雪

最新推荐文章于 2024-04-22 09:30:00 发布

阅读量531

点赞数

文章标签：动画 css3 css

本文链接：https://blog.csdn.net/qq_48639265/article/details/126071497

版权

transition 过渡

1. transition-property 应用css属性
2. transiton-duration 过渡持续时间，默认为0
3. transition-timing-function 过渡速度,默认为ease
（1）linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
（2）ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
（3）ease-in ：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
（4）ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
（5）ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
（6）cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4. transition-delay 过渡等待时间
5.transition是transition-property,transition-duration,transition-time-function,transition-delay的速写形式，分别是过渡属性，持续时间，时间曲线，过渡延迟

div {
transition: ;
}

过渡连写格式

transition: 过渡属性过渡时长运动速度延迟时间;
/transition: width 5s linear 0s,background-color 5s linear 0s;/
/transition: background-color 5s linear 0s;/
/transition: width 5s,background-color 5s,height 5s;/

animation 动画

1. 动画配置

动画属性
1. animation-name：动画名称
2. animation-duration：动画持续时长
3. animation-timing-function：动画速度曲线
4. animation-delay：动画等待时长
5. animation-iteration-count：动画播放次数
（1）n：一个数字，定义应该播放多少次动画；
（2）infinite ：无限次执行。
6. animation-direction：动画是否反向播放
（1）normal：默认的取值，执行完一次之后回到起点继续执行下一次
（2）alternate：往返动画，执行完一次之后往回执行下一次
（3）reverse：反向执行
7. animation-fill-mode：动画结束帧
（1）none：不做任何改变
（2）forwards：让元素结束状态保持动画最后一帧的样式
（3） backwards: 让元素等待状态的时候显示动画第一帧的样式
（4）both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
8. animation-play-state：告诉系统当前动画是否需要暂停
（1）running: 执行动画
（2） paused: 暂停动画

动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

动画模块连写格式的简写

animation：动画名称  动画时长

2.动画关键帧

@keyframs name{
开始过程结束
from{}
to{}
0%{}
25%{}
100%{}
}

手风琴效果

<!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>
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		ul{
			width: 960px;
			height: 200px;
			border: 1px solid;
			margin: 50px auto;
			overflow: hidden;
		}
		ul li{
			width: 160px;
			height: 200px;
			float: left;
			transition: width 0.5s linear;
		}
		ul:hover li{
			width: 100px;
		}
		ul li:hover{
			width:200px;
		}
	</style>
</head>
<body>
	<ul>
		<li><img src="../images/ad7.jpeg" alt=""></li>
		<li><img src="../images/ad8.jpg" alt=""></li>
		<li><img src="../images/ad9.jpeg" alt=""></li>
		<li><img src="../images/ad10.jpg" alt=""></li>
		<li><img src="../images/ad11.jpg" alt=""></li>
		<li><img src="../images/ad12.jpg" alt=""></li>
	</ul>
</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;
			list-style: none;
		}
		/* 设置轮播图图片容器 */
		div{
			width: 800px;
			height: 300px;
			border: 1px solid;
			margin: 50px auto;
			overflow: hidden;
		}
		/* 设置轮播图容器 */
		ul{
			width: 3000px;
			height: 300px;
			animation: swipe 8s linear infinite;
		}
		ul li{
			float: left;
			width: 400px;
			height: 300px;
		}
		ul:hover li{
			opacity: 0.5;
		}
		ul li:hover{
			opacity: 1;
		}
		ul li img{
			width: 400px;
			height: 300px;
		}
		@keyframes swipe {
			/* 开始状态 */
			from{
				margin-left: 0;
			}
			/* 结束状态 */
			to{
				margin-left: -1600px;
			}
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><img src="../images/ad7.jpeg" alt=""></li>
			<li><img src="../images/ad8.jpg" alt=""></li>
			<li><img src="../images/ad9.jpeg" alt=""></li>
			<li><img src="../images/ad10.jpg" alt=""></li>
			<li><img src="../images/ad7.jpeg" alt=""></li>
			<li><img src="../images/ad8.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>