当前位置：网站首页>transition过渡＆＆animation动画

transition过渡＆＆animation动画

2022-07-30 23:33:00 【qq_48639265】

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>