transition 过渡
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数),也可以提前(数值为负数) )
transition-timing-function : linear|ease-in|ease-out|ease-in-out;
规定速度效果的速度曲线。常用的就是linear匀速,在动画时也是常用到这个属性。
下面是贝塞尔曲线函数引用 https://cubic-bezier.com/ 网址
transition-timing-function: cubic-bezier(.4,-0.45,.9,1.61);
下面是复合样式:
transition: all 1s 2s linear;
变化所有样式,1s完成 2s后开始 均匀变化
也可以单独指定变化的样式,延迟时间也可以为负值,就是代表提前开始,总共时间减去提前开始的时间,就是样式完成的时间
transition: height 3s -2s linear;
就是指只让高3s进行过渡变化,但由于提前2s所以过渡时间就是1s
注:总时间和延迟时间有顺序,第一个时间固定就是总时间,其余属性值无顺序
注:不要加到hover上,否则达不到想要的返回效果。
transform变形
translate : 位移
translateX
translateY
translateZ ( 3d 时用到)
scale : 缩放 (值是一个比例值,正常大小就是1,会已当前元素中心点进行缩放)
scaleX
scaleY
scaleZ (3d时用到)
rotate : 旋转 ( 旋转的值,单位是角度 deg )
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系,那正值按顺时针旋转,负值按逆时针旋转 )
skew : 斜切
skewX : 单位也是角度,正值向左倾斜,负值向右倾斜。
skewY
transform: skew(30deg, 0);斜切 正值向左倾斜 负值向右倾斜
transform的注意事项:
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素,但是不能添加给内联元素,对内联元素不起作用。
3. 复合写法,可以同时添加多个变形操作。
执行是有顺序的,先执行后面的操作,再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)
注:3D时 x y可以写汉字例如left center,但z轴只能写数值
transform变形(复合样式先执行后面的,一般情况下位移会受到影响)
transform: translate(40px) rotate(60deg);先旋转后移动
transform: rotate(60deg) translate(40px);会受到角度的影响所以会像右下角一定角度移动后在旋转
animation 动画?
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数
animation-timing-function : 动画的运动形式
注:
1. 运动结束后,默认情况下会停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
animation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效
backwards : 在延迟的情况下,让0%在延迟前生效
forwards : 在运动结束的之后,停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%),一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
animate.css
一款强大的预设css3动画库。
官网地址:https://daneden.github.io/animate.css/
基本使用:
animated : 基类(基础的样式,每个动画效果都需要加)在class后面加
infinite : 动画的无限次数
先用link引入css文件然后如下
<div class=“animated 效果名字”></div>
3D操作
transform:复合样式
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前,负值向后
scaleZ() : 立体元素的厚度
3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
perspective(景深): 离屏幕多远的距离去观察元素,值越大幅度越小,有3D效果时一定要加,否则看不到3D效果。
perspective-origin : 景深-基点位置,观察元素的角度。
transform-origin: center center -50px; (Z轴只能写数值,不能写单词)
transform-style : 3D空间,产生厚度时用到
flat (默认值2d)、preserve-3d (3d,产生一个三维空间)
backface-visibility : 背面隐藏
hidden、visible (默认值)