目录
4.2位移 translate3d translateX translateY translateZ
4.3:旋转 rotate3d rotateX rotateY rotateZ
4.4:缩放:scale3d scaleX scaleY scaleZ
1、过渡
1.1.过渡的理解
过渡(transition)[træn'siʒən]
-通过过渡可以指定一个属性发生变化时的切换方式,平滑的过渡
-在某种条件下可以触发,例如hover情况下
-一次性的效果,不能循环,只能做简单的动画
-只有两帧,设置动画初始值和结束值
-IE10开始兼容,移动端兼容良好
1.2.过渡的4个属性
序号 | 属性 | 意义 | 备注 |
1 | transition-property ['prɔpəti] | 哪些属性要过渡(必填) |
注意: 1、所有数值类型的属性,都可以参与过渡,比如width、height、left、top、border-radius、opacity等 2、从一个有效数值向另一个有效数值进行过渡 |
2 | transition-duration [djuə'reiʃən] | 指定过渡效果的持续时间(必填) | 时间的单位:s和ms 1s=1000ms |
3 | transition-timing-function | 动画变化曲线(缓动效果)(选填) | *ease [i:z] 默认值,慢速开始,先加速,然后再减速 *linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开始和结束的过渡效果 *steps()分布执行过渡效果 cubic-bezier(n,n,n,n)立方贝塞尔曲线函数,值是0-1之间的数值 |
4 | transition-delay | 过渡效果的延迟,等待一段时间后执行过渡(选填) | 时间的单位:s和ms 1s=1000ms |
5 | transition | 同时设置过渡相关的所有属性(选填) | 只有一个要求,如果要写延迟, 则两个时间中,第一个写延迟,第二个写持续时间 |
2、动画
2.1动画的理解
动画和过渡类似,都是可以实现一些动态效果,不同的是过渡需要在某个属性发生变化时才能触发,例如hover,acitve时,动画可以自动触发动画
第一步:先要设置一个关键帧,关键帧设置了动画每一个步骤
制定关键帧用的是@keyframes属性,指定关键帧主要有两种方法:
方法一:
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}
方法二:
@keyframes 关键帧名称{
0%{初始状态属性}
50%(中间还可以再添加关键帧)
100%{结束状态属性}
@keyframes text {
/* from表示动画开始位置 也可以使用0%*/
from {
margin-left: 0;
}
/* to动画的结束位置 也可以使用100%*/
to {
margin-left: 500px;
}
第二步 调用关键帧
2.2、动画属性
序号 | 属性 | 意义 | 备注 |
1 | animation-name | 绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画(必填) | 设置动画的名字,和@keyframs相对应 |
2 | animation-duration | 动画的完成时间,告诉系统动画持续的时长(必填) | 时间单位:s ms |
3 | animation-timing-function | 设置动画如何完成一个周期,告诉系统动画执行的速度(与过度动画类型) | linear 是以相同速度开始至结束的过渡效果 ease 是从慢速开始,然后变快,然后慢速结束的过渡效果 ease-in 是以慢速开始的过渡效果 ease-out 是以慢速结束的过渡效果 ease-in-out 是慢速开始和结束的过渡效果 |
4 | animation-delay | 动画在启动前的延迟间隔 | |
5 | animation-iteration-count [,itə'reiʃən] | 动画的播放次数,告诉系统动画需要执行几次 | n 定义动画播放n次 infinite无限次往返执行 |
6 | animation-direction | 指定是否应给轮流反向播放动画 | normal 默认值: 从from向to运行,每次都是这样 reverse 从to到from运行,每次都是这样 * alternate 从from向to运行,重复执行动画时反向执行 alternate-reverse 从to向from运行,重复执行动画时反向执行 |
7 | animation-fill-mode | 规定当动画不播放时(完成时,延时未开始播放时),应用到的元素样式 | none默认值 动画执行完毕 元素回到原来的位置 forwards 动画执行完毕,会停止在动画结束的位置 ackwards 动画延时等待时,元素就会处于开始位置 both 结合了forwards和ackwards的特点 |
8 | animation-play-state | 告诉系统当前动画是否需要暂停 | running 默认值 动画执行 paused 动画暂停 |
9 | animation | 简写,可以写以上任意属性的可选值 | animation:关键帧的名称 动画持续的时间 运动状态(linear(匀速)) 动画延迟的时间 动画的循环次数 动画的运动方式(设置正向或者反向) |
3、变形
3.1、变形的理解
变形属性transform:
- 变形不会影响到页面的布局(只折腾自己)
- 尽量变形写在一个transform里,不然下面再写一个,就会覆盖上面
- 可选值:
位移—translate()
缩放—scale()
旋转—rotate()
倾斜—skew()
3.2 位移 transform: translate()
translate(参数1,参数2) 属性值1是指在x轴上移动的距离,属性值2是指在y轴上移动的距离,参数2默认为0
translateX()沿着x轴方向平移
translateY()沿着y轴方向平移
translateZ()沿着z轴方向平移 结合视距起作用.不能是百分比数值(3d变化)
注意:
1、平移元素,可以是数字,可以是百分比,百分比是相对于自身计算的,x轴往左为正,y轴往下为正,反之为负
2、位移的参考原点是元素的左上角
3、如果是通过active进行位移,执行完毕后会还原
//垂直水平居中的效果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%) translateY(-50%); */
3.3、 旋转 transform: rotate();
- 默认情况下是绕着中心点进行转动的;
- 如果这个值为正值,则是元素对原点中心顺时针旋转;
反之如果这个值为负值,元素对原点中心进行逆时针旋转。
- 可以单独对x轴y轴z轴进行设置:这里的X/Y/Z也是是需要大写的。
rotateX() ,指元素围绕其 X 轴以设定的度数进行旋转
rotateY() ,元素围绕其 Y 轴以设定的度数进行旋转
rotateZ() , 元素围绕其 Y 轴以设定的度数进行旋转
3.4 缩放transform:scale()
- 缩放属性是让元素根据中心原点对对象进行缩放。
- 默认值是1,这里的参数没有单位,1以下的任何值,使一个元素缩小,0则是消失;而任何大于1的值,会让元素变得更大。
- 缩放属性的属性值和位移属性的属性值是类似的语法,可以是一个值,也可以有两个属性值:只有一个值的时候第二个值和第一个值是相等的;两个值的时候,属性值1是指在x轴上缩放元素,属性值2是指在y轴上缩放元素。
- 单独对x轴y轴进行设置:同样这里的X/Y/Z也是是需要大写的。
transform:scaleX();元素只在x轴上缩放元素
transform:scaleY();元素只在y轴上缩放元素
transform:scaleZ(); 元素只在z轴上缩放元素
3.5 倾斜transform:skew()
- 倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。
- 一个参数时:表示x轴的倾斜x角度,y轴默认为0;
- 两个参数时:第一个参数表示x轴的倾斜角度,第二个参数表示y轴的倾斜角度。
- 变形的单位是deg
x值:为正则向左变形,为负则向右变形
y值:为正则向上变形,为负则向下变形
以上是以左上角为参照向左向右,向上,向下变形
- 可单独对x轴y轴进行设置:这里的X/Y也是是需要大写的。
transform:skewX() ;
transform:skewY();
3.6 变形原点 transform-origin
- 原点就是元素的中心,通过 transform-origin 改变原点的位置
- 用变形原点—transform-origin属性,该属性只有在设置了transform属性的时候会起作用
- 设置偏移量值都是从元素左上角开始的
- transform-origin也有两个属性值:
transform-origin:(水平方向 垂直方向),默认值transform-origin:(center center)
值可以为方向值(left、center、top、right、bottom等),也可以是以px、%为单位的数值
4、变形3D
4.1父元素样式:
3D变化需要父元素设置样式才能保留3d的变化效果
保留3d变化:transform-style:preserve-3d;默认值flat
设置视角深度 :perspective [pə'spektiv] 设置当前网页的视距为800px,人眼距离网页的距离,一般不小于600px
有的浏览器 html{perspective: 800px; },perspective(800px) 谷歌要直接设置在transform,或者父元素上
例如:transform: perspective(800px) translateZ(100px)
perspective:800-1200px,一般为900px-1000px
4.2位移 translate3d translateX translateY translateZ
translate3d(x,y,z):必须传递三个参数
translateX(x) translateY(y) translateZ(z)
参数单位为px
x值:为正则沿着x轴向右移动,为负则沿着x轴向左位移???
y值:为正则沿着y轴向下位移,为负则沿着y轴向上位移
z值:为正则沿着z轴向屏幕外位移,为负则沿着z轴向屏幕内位移
4.3:旋转 rotate3d rotateX rotateY rotateZ
x,y,z为三个方向的矢量值,无单位
rotateX(角度) rotateY(角度) rotateZ(角度) 沿着元素中心点穿过的某个轴旋设置的角度
参数角度单位为deg
角度值:为正则顺时针旋转,为负则为逆时针旋转
可以通过transform-origin:left来设置,比如绕着元素的左边框旋转
backface-visibility属性定义当元素旋转到背面向屏幕时,是否可见
visible 背面可见
hidden 背面不可见
4.4:缩放:scale3d scaleX scaleY scaleZ
scale3d(num,num,num):必须要传三个参数
scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴方向缩放相应的倍数
参数为数字,无单位
比较麻烦,感兴趣的自己研究,了解即可
5、动画库
序号 | 网址 | 线上css | |
1 | https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |