前言
最近在逆战班学习了css动画属性,开始感觉还是不错滴,但过了几天有点忘记了,就再次翻了翻笔记整理了一下,希望能加深印象。有错的地方希望能够指点指点。
css动画结合属性有: transform(动画变形属性)
transition(动画过渡属性) animation(帧动画属性)
一:transform动画变形属性
在平面空间也就是2d空间中的transform动画变形属性:
1)2d的变换:
在平面进行位置的移动 transform:translate()
在平面进行旋转 transform:rotate()
在平面进行缩放 transform:scale()
在平面进行倾斜 transform:skew()
2)2d位移
transform:translate(参数1,参数2)
参数1:水平方向移动的距离
参数2:垂直方向移动的距离
参数的设置:如果是正值的情况下:往右往下 负值:往左往上
注意:参数表示坐标值,第二个参数可选,若省略默认为0px
单独设置X/Y的位移:
transform:translateX(水平方向移动的距离);
transform:translateY(垂直方向移动的距离);
3)2d缩放:
transform:scale(参数1,参数2); (0 -
0.999999 缩小 大于1 放大)
参数1:水平方向缩放的比例
参数2:垂直方向缩放的比例
注:如果两个参数相同的情况下 直接写一个。
单独设置X Y
transform:scaleX(水平方向缩放的比例);
transform:scaleY(垂直方向缩放的比例);
4)2d旋转:
transform:rotate(旋转的角度); 旋转的是一个度数 deg
注:默认情况下绕着元素中心点进行转动
5)2d倾斜:
transform:skew(参数1,参数2); deg(度数单位)
参数1:水平方向的倾斜角度
参数2:垂直方向的倾斜角度
注意:参数表示倾斜角度,第二个参数可选,若省略默认为不倾斜
单独设置围绕某个轴(X Y)
transform:skewX(度数)
transform:skewY(度数)
6)2d变形原点:(默认是以元素的中心点为基准点进行变形的)
transform-origin:水平方向 垂直方向
可以如下三种方式设置变形原点位置:left center(用表示位置的单词设置)或10px 10px(直接数值设置)或50%(百分比设置)
注: 如果transform:有两个功能函数:先写位移 再写旋转
在三维空间也就是3d空间中的transform动画变形属性
3D功能函数:
1)3D的位移:
transform:translate3D(x,y,z);
translateX(移动的距离) 沿着x轴移动
translateY(移动的距离) 沿着y轴移动
translateZ(移动的距离) 沿着z轴移动
注:沿着z轴移动的距离不能是百分比,x轴和y轴可以为百分比。
2)3D的旋转:
transform:rotate(旋转角度);
rotateX(旋转角度) 沿着x轴方向旋转
rotateY(旋转角度) 沿着y轴方向移动
rotateZ(旋转角度) 沿着z轴方向旋转(默认情况效果类似)
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
- y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
- z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
- a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
注:直接写rotate(旋转角度)与沿着z轴方向旋转、平面旋转效果一样
3)3D缩放:
transform:scale3d(x,y,z); x,y,z为一个数值(0 -0.999999缩小 大于1 放大)
scaleX(缩放大小) x轴缩放
scaleY(缩放大小) y轴缩放
scaleZ(缩放大小) z轴缩放
4) css3-景深!(3D空间!)
观察物体的一视角距离.产生近大远小的效果。
语法:
perspective: 1200px;(一般都是在父元素中使用)
transform:perspective(1200px) (在子元素中使用)
注:两个都设置会发生冲突,建议只设置父元素,通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候,基本上就不会有近大远小的感觉
设置视觉角度:
persperctive-origin: left top(表位置单词) / 50% 50%(百分比) / 0px 0px(数值)
让当前形成一个3D舞台,让其子元素在3D空间里面进行一个变换:
语法
transform-style:preserve-3d /
flat(默认值:平面空间);
二:transform过渡属性
css3过渡属性:
- transition-property:检索或设置对象中的参与过渡的属性
- transition-duration:检索或设置对象过渡的持续时间
- transition-delay:检索或设置对象延迟过渡的时
- transition-timing-function:检索或设置对象中过渡的动画类型适用于所有元素以及:before和:after伪元素。
简写方法:
transition: 属性值1 属性值2 属性值3 属性值4
属性值1:
需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值)
属性值2:
过渡的时间 s秒 ms 毫秒
属性值3:
延迟的时间 s秒 ms 毫秒
属性值4:
过渡动画的效果,默认值为ease
取值简单说明如下:
ease : 先快后慢
linear :匀速
ease-in:逐渐加快
ease-out:逐渐变慢
ease-in-out:先快后慢
cubic-bezier:特殊的立方贝塞尔曲线效果
注:transition 必须通过鼠标事件触发(鼠标滑过 )
三animation帧动画属性
animation:不需要事件进行触发。调用关键帧即可
制定关键帧:
@keyframes 关键帧的名称{
from{} 起始效果
to{} 动画后的效果
或
0%{
//开始状态
}
25%{
}
50%{
}
…
100%{
//结束状态
}
}
animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数(默认情况下运动1次) infinite(无限循环)
animation-direction 运动的方向
属性值:
- reverse:反方向运行 ( 让关键帧从后往前执行 )
- alternate:动画先正常运行再反方向运行,并持续交替运行
- alternate-reverse:动画先反运行再正方向运行,并持续交替运行
animation-play-state
属性值: paused暂停 running运动
常用的写法:
animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间