属性名称 | 作用 | 值 | 值及中文释义 |
---|---|---|---|
transition-property |
观察目标 | all :观察所有height :观察目标高度height,width :观察目标高度和宽度,多个属性使用逗号隔开 |
|
transition-duration |
过渡时间 | 例:2s |
|
transition-timing-function |
过渡效果 | linear :匀速ease :加速ease-in :先减速后加速ease-out :先加速后减速ease-in-out :先减速再加速再减速贝加尔曲线: https://cubic-bezier.com/#.17,.67,.83,.67 |
|
transition-delay |
过渡延迟时间 | 例:2s |
|
transition |
过渡复合属性 | 观察目标 过渡时间 [过渡效果] [延迟时间] 例: all 4s linear 2s |
过渡效果和延迟时间可以省略,复合属性观察目标只能有一个,如果想要观察多个目标请使用all |
过渡不能观察display: none;
和display: block;
,通过下面的方式可以实现显示隐藏过渡动画
div {
width: 200px;
height: 200px;
font-size: 40px;
line-height: 200px;
text-align: center;
margin: 50px auto;
background-color: pink;
transition: all 4s;
}
div {
height: 0;
border: 0;
overflow: hidden;
}
h1:hover + div {
height: 200px;
}
属性名称 | 作用 | 值 | 值及中文释义 |
---|---|---|---|
animation-name |
动画名称 | ||
animation-duration |
过渡时间 | ||
animation-timing-function |
过渡方式 | linear :匀速ease :加速ease-in :先减速后加速ease-out :先加速后减速ease-in-out :先减速再加速再减速贝加尔曲线: https://cubic-bezier.com/#.17,.67,.83,.67 |
|
animation-iteration-count |
运动次数 | infinite :无限次number :具体次数 |
|
animation-delay |
延迟时间 | ||
animation-play-state |
运动状态 | running :运动状态paused :停止状态 |
|
animation-direction |
运动方向 | normal :正方向reverse 反方向alternate :正方向交替alternate-reverse 反方向交替 |
|
animation-fill-mode |
动画运动完的保持状态 | none :默认值forwards :最后一帧状态backwards :第一帧状态 |
|
animation |
动画复合属性 | 动画名称 过渡时间 [过渡类型] [延迟时间] [循环次数] [保持状态] [运动方向] | |
@keyframes |
定义动画 | 动画里可以使用from 、to 关键字代表关键时间的状态,也可以使用百分比 |
动画定义:
from...to...
模式
@keyframes dh1 {
from {
width: 200px;
height: 200px;
background-color: red;
}
to {
width: 600px;
height: 500px;
background-color: blue;
}
}
百分比模式:
@keyframes dh2 {
0% {
width: 200px;
height: 200px;
background-color: red;
}
25% {
width: 300px;
height: 200px;
background-color: yellow;
}
50% {
width: 300px;
height: 300px;
background-color: green;
}
75% {
width: 400px;
height: 400px;
background-color: gray;
}
100% {
width: 600px;
height: 500px;
background-color: blue;
}
}
steps
函数:
start
:意思为保留下一帧,看不到第一帧,即第一帧的过渡是很快,肉眼捕捉不到,但第一帧是存在的(第一个参数很小的情况下),相当于step-start
end
:意思为保留第一帧,看不到下一帧,即看不到最后一帧过渡很快,肉眼捕捉不到,但最后一帧是存在的(第一个参数很小的情况下),相当于step-end
通常我们会将逐帧动画应用在轮播图上,在定义动画时让轮播图最后一步多走一步空白,使用steps(1, end)
它就能跳到第一帧,实现最后一帧与第一帧无缝连接。
transform
:设置2D
动画属性
函数名称 | 作用 | 值 | 值及中文释义 |
---|---|---|---|
translateX |
水平移动 | x |
|
translateY |
垂直移动 | y |
|
translate |
水平和垂直移动 | x,y |
|
skewX |
水平倾斜 | 例:30deg |
正值,拽着盒子的右下角 向右,使得盒子右下角竖直方向的边与Y 轴形成设置的夹角负值,拽着盒子的 左下角 向左,使得盒子左下角竖直方向的边与Y 轴形成设置的夹角 |
skewY |
垂直倾斜 | 例:30deg |
正值,拽着盒子的右下角 向下,使得盒子右下角水平方向的边与X轴形成设置的夹角负值,拽着盒子的 左下角 向下,使得盒子左下角水平方向的边与X轴形成设置的夹角 |
skew |
水平和垂直倾斜 | 例:30deg,30deg |
|
scale |
缩放 | 0 < val < 1 :缩小val > 1 :放大val = 1 :不变val = 0 :隐藏-1 < val < 0 :倒立缩小val < -1 :倒立放大 |
|
rotate |
旋转 | 例:720deg |
translate
和定位和margin
的区别:translate
不会脱离文档标准流,并且不会对周围的元素产生影响
缩放和旋转默认是按照盒子中心点进行的,但也可以自定义设置缩放和旋转的中心点
transform-origin: center bottom;
transform
可以同时支持平移、缩放、旋转,但是有一定的执行顺序
translateX(600px) scale(0.5);
先平移后缩放scale(0.5) translateX(600px);
先缩放后平移,会造成平移的距离也被缩放translateX(600px) rotate(90deg);
先平移后旋转rotate(90deg) translateX(600px);
先旋转后平移,会造成将该目标的x轴和Y轴一起旋转,导致平移方向发生变化3D
效果前提条件:父盒子设置以下条件:
transform-style: preserve-3d;
表示这个父盒子里的子元素拥有了3D
效果perspective: 1000px;
设置景深(即人与屏幕之间的距离,如果不设置景深,则人不会有近大远小的感觉)transform
:设置3D
动画属性
函数名称 | 作用 | 值 | 值及中文释义 |
---|---|---|---|
translate3d |
平移 | x, y, z |
|
rotate3d |
旋转 | x, y, z |
|
scale3d |
缩放 | x, y, z |
注意:
Y
轴正轴等于
景深,则人的肉眼看不到这个物体。因为这个物体已经与人处于同一平面了Y
轴正轴大于
景深,则人的肉眼看不到这个物体。因为这个物体已经到人的背后了