动画 ie9及以下不支持
定义动画
@keyframes 动画名{
关键帧 划分时间
from{} 0%
to{} 100%
}
5s
@keyframes 动画名{
0%{} 0
20%{} 1s
40%{} 2s
60%{} 3s
80%{}
100%{}
}
兼容写法
@-moz-keyframes longer{}
@-webkit-keyframes longer{}
使用动画
animation-name: 动画名animation-duration: 动画执行的时间 s/msanimation-delay: 动画的延迟时间 s/msanimation-iteration-count: 动画执行的次数 数值/infinite（无限循环）animation-timing-funcition: 动画的执行效果 linear(匀速)复合写法 animation: 动画名 动画执行的时间 动画的延迟时间 动画执行的次数 动画的执行效果; animation: longer 1s infinite linear;
兼容写法 -webkit-animation animation-direction: 动画的播放方向；noraml(正向)/reverse(反向)/alternate(交替运行)animation-fill-mode:动画停止的关键帧(要限制次数才可以停止)；backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向，关键帧起始和结尾也会变animation-play-state:动画是否停止播放 running(播放)/paused(暂停)
div:hover {
animation-play-state: paused
;
}
3d变形 transform
位移
z轴的位移 transform:translateZ(数值+px)三个轴都位移 transform:translate3d(x轴,y轴,z轴) 旋转
x轴的旋转 transform:rotateX(数值+deg)y轴的旋转 transform:rotateY(数值+deg)三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转 缩放
z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放) 景深：persepctive:数值+px 近大远小形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上背部隐藏：backface-visibility: hidden;
透明度
使用透明度可以实现元素从无到有的过程第一种 rgba()
div {
width: 200px
;
height: 200px
;
background-color: rgba(165, 42, 42, 1
); 透明度从1
transition: all 1s
;
}
div:hover {
background-color: rgba(165, 42, 42, 0
);过渡到0
}
第二种 opacity
div {
width: 200px
;
height: 200px
;
background-color: brown
;
opacity: 1
; 透明度从1
transition: all 1s
;
}
div:hover {
opacity: 0
; 过渡到0
}
区别：rbga不会模糊到里面的文字，opacity会影响里面的文字
