一.动画的基本语法和参数
1,过渡:transition:使元素指定属性从A状态过渡平滑过渡到B状态，而不是直接过去，
2.语法:transition:all 1s ease 0s;
第一个参数:需要过渡的属性 ,all(默认)所有属性都过渡 基本上所有属性都能过渡 不能过渡:float/渐变*/
第二个参数:过渡时间 s
第三个参数: 缓冲描述词,速率 ease:逐渐变慢 linear:匀速过渡 ease-in:先慢后快 ease-out:先快后慢 ease-in-out:先慢后快再慢
第四个参数:延迟时间 0s就是不延迟
二.animation动画属性
语法：animation:box3s infinite 0s;
定义动画：@keyframes 动画名称{
from{
A 状态
}to{
B 状态
}
/*0%~~100%*/
0%{
}
animation动画属性：
1.animation-name:动画的名称
2.animation-duration:动画持续时长
3.animation-timing-function:定义动画的速率 ease -in - out - 贝塞尔曲线
4.animation-delay:延迟时间
5.animation-iteration-count:播放次数 infinite:无限次数
6.animation-direction:动画播放方向
nomal:一直向前播放,当到最后一帧会回到第一帧;
reverse:跟normal方向相反
alternate:往复播放
alternate-reverse:跟alternate反向
7.animation-fill-mode ： forwards：动画播放完毕回到第一帧的状态
none:默认,不设置 both:动画播放完毕后会回到结束或开始状态,结束状态优先
8.animation-play-state:控制动画播放 paused:暂停动画 running:启动继续播放
三.transfrom 3D效果
1. perspective: 400px; 先给父元素设置景深：眼睛距离舞台的位置
2.反面效果：/* backface-visibility:hidden
设置元素背面是否可见
visible:可见;
hidden:不可见;*/
transform-style: preserve-3d;
flat:平面2D显示;
transform: 旋转 rotate(30deg) ：定义2D旋转，参数角度
rotateX()定义沿着X轴的3D旋转 正值:向后躺 负值:向前趴
rotateY()定义沿着Y轴的3D旋转 正值:向里转 负值:向外转
rotateZ()定义沿着Z轴的3D旋转
none:不旋转
perspective 景深:眼睛距离舞台的距离 3D变形要有舞台概念，添加景深，单位是px
度数:正值是顺时针转 负值是逆时针转
缩放： scale() scaleX() scaleY() 度数:大于1是放大,小于1是缩小
变形斜切：skew(x,y)：定义沿着X轴和Y轴的2D斜切转换
skewX()：定义沿着X轴的2D斜切转换
skewY()：定义沿着Y轴的2D斜切转换
第一个参数表示横向斜切 第二个参数表示纵向斜切
移动：translateX()：定义对象x轴的平移
translateY()：定义对象Y轴的平移
translateZ()：定义对象Z轴的放大缩小，效果和scale相同
transform-style: 设置组合体的显示方式:
flat:平面2D显示;
preserve-3d:立体3D显示
多个形变用空格隔开
参考位置：transform-origin 属性允许改变被转换元素的参考位置
设置旋转轴
第一个参数是横向位置(具体尺寸0px/方向描述性参数：left/right/bottom/top/center/还可以用百分比)
第二个参数是纵向位置
left top 相当于 0 0
top center 相当于 0 50%
right top 相当于 100% 0
沿x轴转 : top:0% center:50% bottom:100%;
沿y轴转 : left:0% center:50% right:100%
网友评论