目录
思维导图：
一、css过渡
1、过渡的定义
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果，即CSS 过渡允许您在给定的时间内平滑地改变属性值。
2、语法规则
选择器{ ??
???????????????? ?transition:property duration timing-function delay
???????????}
tansition属性用于实现简单的动画效果；
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性。
实例：实现的效果是当鼠标悬停在50*50的正方形块上时方块变大，光标移开逐渐变回原始样式。
div {
/*100px * 100px 的红色 <div> 元素。 <div> 元素还为 width 属性和height属性指定了过渡效果，持续时间为 2 秒和4秒*/
width: 50px;
height: 50px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
/*为 width 属性和height属性指定一个鼠标悬停在 <div> 元素上时的新值*/
width: 250px;
height: 250px;
}3、transiton常用子属性?
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于将四个过渡属性设置为单一属性。 |
| transition-delay | 规定过渡效果的延迟（以秒计）。 |
| transition-duration | 规定过渡效果要持续多少秒或毫秒。 |
| transition-property | 规定过渡效果所针对的 CSS 属性的名称。 |
| transition-timing-function | 规定过渡效果的速度曲线。 |
3.1?property：规定应用过渡的CSS属性的名称
取值：
- none：没有属性会获得过渡效果
- all：默认值，所有属性获得过渡效果?
3.2??duration：定义过渡效果花费的时间
取值：
time值：以秒或毫秒计，默认是0，意味着没有任何效果
3.3?timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
实例：展示了可以使用的一些不同的速度曲线：
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}?3.4? delay：规定开始之前需要等待的时间
取值：
time值：以秒或毫秒计，默认是0
实例：启动之前有2秒的延时
div {
transition-delay: 2s;
}二、2D转换
1 css的转换
transform属性允许对元素应用2D转换，CSS?转换可以对元素进行移动、缩放、转动、拉长或拉伸
2? 语法规则
选择器{ ?? ?transform:none | transiform-functions }
上面的tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
3? 2D转换常用函数
| 函数名 | 描述 | ?参数说明 |
| rotate(angel) | 旋转元素 | Angel是度数值，代表旋转角度 |
| skew(x-angel,y-angel) | 倾斜元素 | |
| skewX(angel) | 沿着X轴倾斜 | |
| skewY | 沿着Y轴倾斜 | |
| scale(x,y) | 缩放元素，改变元素的高度和宽度 | 代表缩放比例，取值包含正数、负数和小数 |
| scaleX | 改变元素的宽度 | |
| scaleY | 改变元素的高度 | |
| translate(x,y) | 移动元素对象，基于x和y坐标重新定位元素 | 元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，向右和向下使用正数。 |
| translateX(x) | 沿着x轴移动元素 | |
| translateY(y) | 沿着Y轴移动元素 |
3.1? rotate() 方法根据给定的角度顺时针或逆时针旋转元素（负值即逆时针旋转）。
实例：顺时针旋转20度
div {
transform: rotate(20deg);
}3.2??scale()方法，该元素增加或减少元素的大小，取决于宽度（X轴）和高度（Y轴）的参数
实例：
div {
transform: scale(3, 4);/*元素增大为其原始宽度的3倍和其原始高度的4倍*/
transform: scale(0.5, 0.5);/*元素减小为其原始宽度和高度的一半*/
}3.3? ?skew() 方法使元素沿 X 和 Y 轴倾斜给定角度
实例：
div {
transform: skew(30deg, 20deg);/*元素在x轴方向倾斜30度，在y轴方向倾斜20度*/
}3.4?translate() 方法，从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）
实例：
div
{
/*从左边元素移动50个像素，并从顶部移动100像素。*/
transform: translate(50px,100px);
}三、css动画
1、css动画的定义
动画使元素逐渐从一种样式变为另一种样式，可以随意更改任意数量的 CSS 属性，如需使用 CSS 动画，必须首先为动画指定一些关键帧，该关键帧包含元素在特定时间所拥有的样式。
2、关键帧
2.1?关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。
2.2 关键帧语法规则
@keyframes animationname{?
????????????????????????????????????????????????keyframes-selector{css-style}
}
其中：
- animationname是当前动画的名称；
- keyframes-selector:是关键帧选择器
- css-style:当前关键帧的动画状态；
3?animation属性
3.1 animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性；
3.2 语法规则
选择器{ ?? ?animation:name|duration|timing-function|delay|iteration-count }
3.3?animation子属性
3.3.1?animation-name：规定@keyframes动画的名称
取值：
keyframe name：规定需要绑定到选择器的keyframe的名称
none:规定无动画效果（可用于覆盖来自级联的动画)
3.3.2?animation-duration：规定动画完成一个周期所花费的时间
取值：
time值：以秒或者毫秒计算，默认是0
3.3.3?animation-timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果 ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。
?3.3.4?animation-delay：规定开始之前需要等待的时间
取值：
time值：以秒或毫秒计，默认是0
3.3.5?animation-iteration-count：规定动画播放的次数
取值：
n：定义动画播放次数的数值，默认为1
infinite：规定动画应该为无限次播放
四、综合实例
4.1 代码
<!DOCTYPE html>
<html lang="zh">
<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>图片排列</title>
<style>
body{
overflow: hidden;
}
li{
list-style: none;
float: left;
text-align: center;
}
.box1{
margin-top: 50px;
position: relative;
top: 50px;
left:50px;
}
img:hover{
animation: test 0.3s linear 0.001s 1;
}
@keyframes test {
0%{
transform: scale(1);
}
20%{
transform: scale(0.7,1.3);
}
40%{
transform: scale(0.9,1.1);
}
60%{
transform: scale(1.1,0.9);
}
80%{
transform: scale(0.85,1.15);
}
100%{
transform: scale(1);
}
}
.a{
padding-left: 20px;
}
.b{
position: relative;
top: 185px;
right:710px;
padding-left: 113px;
}
img{
height: 120px;
width: 160px;
border-radius: 20%;
}
</style>
</head>
<body>
<div class="box1">
<li class="a"><img src="../动画/m1.jpg"><p>猫和老鼠</p></li>
<li class="a"><img src="../动画/m2.jpg"><p>猫和老鼠</p></li>
<li class="a"><img src="../动画/m3.jpg"><p>猫和老鼠</p></li>
<li class="a"><img src="../动画/m4.jpg"><p>猫和老鼠</p></li>
</div>
</body>
</html>4.2 效果视频
实例效果图