一、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