一、transform
1. transform属性的可选值
可选值：
- 平移：translate(x,y)
- 缩放：scale(x,y)
- 旋转：rotate(deg)
- 倾斜：skew(deg,deg)
特点：
- 对于行内元素无效，对于行内替换元素、行内块元素、块元素有效
- 多个transform函数之间用空格来并列
1.1 translate（x,y）
translateX translateY translateZ
- 设置一个值时，设置x轴上的位移
- 设置两个值时，设置x轴和y轴上的位移
- 值类型：
-
- 数字：100 px
- 百分比：参照元素本身（refer to the size of bounding box）
- 对行内元素无效
1.2 scale（x,y）
- 设置一个值时，设置x轴上和y轴上相同的缩放
- 设置两个值时，设置x轴和y轴上的缩放
- 取值
-
- 数字：1——保持不变；2——放大一倍；0.5——缩小一半
- 百分比：不支持百分比
1.3 rotate（deg）
- deg :旋转的角度，顺时针为正
-
- 例子：transform :rotate(45 deg)
-
- 旋转的原点就是transform-origin
1.4 skew（deg,deg）
- 值的单位：deg，顺时针为正
- 一个值时，表示x轴上的倾斜
-
- 两个值时，表示x轴和y轴上的倾斜
2. transform-origin
- 只有一个值，设置的是x轴的原点
- 同时两个值，同时设置x轴和y轴的原点
- 取值可以是数字，百分比，或者left,center,right等关键字，百分比参考的是元素本身
3. 3D相关
3.1 前提
- 设置perspective属性
transform-style: preserve-3d;
html{
/*perspective 视距 ，设置人的眼睛和网页之间的距离*/
perspective: 800px;
}
复制代码3.2
二、transition
transition属性是多个css属性的缩写，包括：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
1. transition-property
- 作用：指定应用过渡属性的名称
- 取值：width/height/all...
-
- 多个属性间使用,隔开
- 如果所有属性都需要过渡，则使用all关键字
-
- 属性是否支持动画查看文档，一般数字型的都可以
2. transition-duration
- 作用：指定过渡动画所需的时间
- 单位可以是秒或者毫秒
- 例子：transition-duration ：100ms /1s
3. transition-timing-function
- 作用：指定动画的变化曲线
- 取值：ease/ease-in/ease-out
-
- ease 默认值，慢速开始，先加速，再减速
- linear 匀速运动
-
- ease-in 加速运动
- ease-out 减速运动
-
- ease-in-out 先加速 后减速
- cubic-bezier() 来指定时序函数：cubic-bezier.com
-
- steps() 分步执行过渡效果，配合图片实现动画效果
- 可以设置一个第二个值：
-
-
- end ， 在时间结束时执行过渡(默认值)
- start ， 在时间开始时执行过渡
-
4. transition-delay
- 作用：延迟/等待多久再次执行动画
5. 例子
\
\
\
\
<!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>
.box {
width: 132px;
height: 271px;
background-image: url("bigtap-mitu-queue-big.png");
transition: all 0.3s steps(4);
}
.box:hover {
background-position: -528px 0px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
复制代码三、动画animation
1. 使用步骤
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
.box{
position: absolute;
width: 300px;
height: 100px;
background-color: #bfa;
left: -250px;
top:200px;
animation: test-animation 1s linear infinite alternate ;
}
@keyframes test-animation {
0%{
left: -250px;
}
100%{
left: 0px;
}
}
复制代码2. 属性取值
- animation-name: 要对当前元素生效的关键帧的名字
- animation-duration: 动画的执行时间
- animation-delay:动画的延时
- animation-iteration-count:
-
- infinite:无限次
- animation-direction： 指定动画运行的方向
-
- normal 默认值 从 from 向 to运行 每次都是这样
- reverse 从 to 向 from 运行 每次都是这样
-
- alternate 从 from 向 to运行 重复执行动画时反向执行
- alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
- animation-play-state: 设置动画的执行状态
-
- running 默认值 动画执行
- paused 动画暂停
- animation-fill-mode: 动画的填充模式
-
- none 默认值 动画执行完毕元素回到原来位置
- forwards 动画执行完毕元素会停止在动画结束的位置
-
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards 和 backwards
