一、过渡
过渡的属性写在本身的元素上,鼠标放上去有过渡效果,滑离的时候也有过渡效果
过渡的属性写在:hover 里,只有划过的时候有过渡效果.
transition-property:
参与过渡的属性 ,可以写多个,中间用逗号隔开,所有属性都参与过渡写all,可以省略不写(不写默认是all)
transition-duration: (必须写)
参与过渡的时间,可以写多个,中间用逗号隔开,时间的值要和参与过渡的属性值一一对应
单位:s ms 1000ms=1s 0.5s=.5s
transition-timing-function:
过渡的速度变化曲线
默认值是:ease
https://cubic-bezier.com/可以到这个地址里自己设置速度的变化
使用的是贝塞尔曲线
可以写多个值,中间用逗号隔开,和参与过渡的属性值一一对应
transition-delay 过渡的延时时间, 可以写多个值,中间用逗号隔开
和参与过渡的属性值一一对应
单位:s ms 1000ms=1s 0.5s=.5s
复合写法:
transition: all 1s linear 2s;
其中过渡的时间是不可以省略的
过渡参与属性省略:默认是all
速度变化曲线省略:ease
延时省略:0
注意顺序 前面的时间是过渡时间,后面的时间是延时时间
transition: width 1s linear 2s,height 3s linear 1s;
多个的时候用逗号隔开
二、元素的转换
1. 平移
transform: translate(x轴的位置,y轴的位置);
transform: translate(x轴的位置);
transform: translateX(x轴的位置);
transform: translateY(Y轴的位置);
正值:向右向下
负值:向左向上
不会影响页面中其他元素的位置
2. 旋转
transform: rotate(旋转的角度);
单位:deg
正值:顺时针
负值:逆时针
backface-visibility:hidden 不是正面面对屏幕就隐藏
3. 缩放
transform: scale(x轴缩放的倍数,y轴缩放的倍数);
transform: scale(x和y轴同时缩放的倍数);
transform: scale(负值);先翻转再缩放
transform: scaleX(x轴缩放的倍数);
transform: scaleY(Y轴缩放的倍数);
4. 倾斜
transform: skew(x轴倾斜的角度,y轴倾斜的角度);
transform: skew(x轴倾斜的角度);
transform: skewX(x轴倾斜的角度);
transform: skewY(Y轴倾斜的角度);
5. 基准点
transform-origin:x轴的位置,y轴的位置;
transform-origin:一个值的时候,这个值表示x轴的位置(y轴的位置默认是center)
单位: px %
Left right top…
6. 3d旋转
transform: rotateX(旋转角度);沿着x轴进行旋转
transform: rotateY(旋转角度);沿着Y轴进行旋转
transform: rotateZ(旋转角度);沿着Z轴进行旋转
transform: rotateX(20deg) rotateY(30deg) rotateZ(45deg);
transform: rotate3d(1,0,0,30deg);
(x,y,z,角度)xyz只的是方向,使用这种办法可以开启移动端的硬件加速
7. perspective 景深
可以让子元素有近大远小的效果,舒服的距离是500到1000.
8. 3d平移
transform: translateZ();沿着z轴平移
transform: translatex(100px) translateY(200px) translateZ(300px);
transform: translate3d(200px,300px,400px)
9. 复合写法:属性值中间用空格隔开,先后顺序会影响效果
transform: rotate(45deg) scale(2) translate(100px,200px) skew(30deg)
transform:translate(100px,200px) rotate(45deg) scale(2) skew(30deg);
10.
transform-style: preserve-3d; 让子元素保留其3d的位置
三、动画
animation-name: change; 动画的名字(必须写)
animation-duration: 4s; 动画的持续时间(必须写)
animation-timing-function: linear; 速度变化曲线
animation-delay: 1s; 动画延时(第一次)
animation-iteration-count: infinite;
动画的次数infinite无限循环
animation-direction: alternate;
是否反向运动
@keyframes 动画的名字{
0%{}
10%{}
…
100%{}
}
可以写from to
animation-fill-mode:
animation-play-state: 设置动画播放或暂停
paused;暂停
running播放
.box div{
width: 100px;
height: 100px;
background: tomato;
animation: change 4s linear 1s infinite alternate;
animation-play-state: paused;
}
.box:hover div{
animation-play-state: running;
}