css3动画

3.transition过渡
    3.1 可设置过渡时间1s=1000ms eg:transition-duration:1s;
    3.2 可设置过渡样式,要出现过渡必须保证每个样式点的属性值都是明确数字,auto不是数值,是默认状态,不明确设置数值的话,无法产生过渡效果
    3.3可设置时间过渡曲线 
        3.3-1 transition-timing-function:cubic-bezier(0.15, 0.79, 1,-0.26);(内赛尔曲线:控制点1(x,y),控制点2(x,y))
        3.3-2 默认值: ease 缓缓移动/ 加速:esze-in /减速:ease-out/先加速后减速:ease-in-out/匀速:linear/先到第二样式,后消耗时间:step-start (闪现)/先消耗时间,后到第二样式点:step-end (回城)/阶越过渡:step(n)n表示阶越次数
    3.4可设置过渡延迟 transition-delay: 2s; 可设置盒子样式切换的先后顺序
4.transform 2d 
    4.1 transform:translateX(px);宽度方向移动transform: translateY(px);高度方向移动transform: translate(px,px);沿着两个方向移动 
    4.2 缩放 transform: scale(2,4); scaleX(宽度倍数) scaleY(高度倍数)scale(n):两个方向n倍scale(n,m):宽度方向n倍,高度方向m倍
    4.3 旋转 transform: rotate(45deg); deg指度
    4.4 斜切 transform: skew(10deg,30deg);  斜切以后再移动移动的方向是斜切过后的x或者y的方向移动
    4.5 变形基准设置 transform-origin:center center;用来设置变形的起始固定点,会按照设置点进行旋转或缩放等,变形基准点一般不设置在hover中
5.transform 3d 
    5.1 开启3d空间 tranform-style:preserve-3d;
    5.2 设置观察者距离，需要看大近大远小的时候要明确观察距离 perspective:px;
    5.3 观察者位置 perspective-origin:center;
    5.4 旋转(沿着x轴宽度方向旋转)transform: rotateX(360deg);(沿着x轴高度方向旋转)transform: rotateY(360deg);(沿着Z轴(垂直与宽高平面的轴)旋转)transform: rotateZ(360deg);(三个方向都设置x,y,z)transform: rotate3d(1,1,1,360deg);
    5.5 移动 宽度方向移动transform: translateX(100px);高度方向移动transform: translateY(100px);沿着Z轴(垂直与宽高平面的轴)移动,需要让父级开启3d然后旋转才能看到,不然默认是flat平面,transform: translateZ(100px);
    5.6 3d 变换基准  按照设置的基准点进行移动或者旋转,也可设置在盒子外,3d旋转,x,y,z轴进行旋转,受transform-origin:x y;设置限制 设置x轴旋转时,转轴位置只由y的值决定,设置y轴旋转时,转轴位置只由x的值决定;设置z轴时,转轴位置由x,y的值共同决定。
    注:如果看到盒子有规律的变化,一定是有父级的盒子带着子级变形盒子,一起进行变形。
6.动画
    6.1 第一步需要定义动画帧
            @keyframes name {
                0%-100%{
                    样式:值；
                }
            }
    6.2 设置动画应用的关键帧 animation-name:name;
    6.3 设置动画总时长 animation-direction:10s;
    6.4 设置动画的播放次数 animation-iteration-count:1/infinite(循环播放);
    6.5 设置动画关键执行顺序 animation-direction:normal(0%-100%)/reverse(100%-0%)/alertnate(0%-100%-0%);
    6.6 设置播放时间曲线=过渡时间曲线 animation-timing-function:linear(匀速);
    6.7 动画播放的结束后样式点控制 animation-fill-mode:backwards(回到起始位置0%)/forwards(停在100%位置)
    6.8 动画延迟时间 animation-delay:1s;
    6.9 控制动画的播放状态 animation-play-state:running(播放)/pasued(暂停)
    简写属性,总时间要写在延迟时间的前面，其他没有顺序
7.阴影
    7.1 阴影效果:可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
        7.1-1 属性值(box-shadow:10px 10px 10px spread阴影大小 color inset内阴影)如果只给出两个值, 那么这两个值将会被当作水平阴影、垂直阴影来解释。如果给出了第三个值，那么第三个值将会被当作模糊距离解释。如果给出了第四个值, 那么第四个值将会被当作阴影尺寸来解释。
        7.1-2 inset 内/外阴影 如果没有指定inset,默认阴影在边框外，即阴影向外扩散。
        7.1-3 第三个值。值越大，模糊面积越大，阴影就越大越淡。
        7.1-4 第四个值。取正值时，阴影扩大。取负值时，阴影收缩。
        7.1-5 如果元素同时设置了 border-radius 属性，那么阴影也会有圆角效果。
    7.2 字体阴影 text-shadow: 0px 0px 0 #b89800;
        7.2-1 位移距离:前两个数是阴影离开文字的横方向和纵方向的位移距离，使用的时候必须设置这两个数值
        7.2-2 阴影的模糊半径:text-shadow属性的第三个参数就是阴影模糊半径,代表阴影向外模糊时的模糊范围
        7.2-3 阴影的颜色,当没有指定颜色值的时候,会使用文本的color颜色值
        7.3-4 可通过修改前三个值设置成立体字 例如:text-shadow:0px 0px 0 #b89800, 1px -1px 0 #b39400, 2px -2px 0 #ad8f00, 3px -3px 0 #a88b00, 4px -4px 0 #a38700, 5px -5px 0 #9e8300, 6px -6px 0 #997f00, 7px -7px 12px rgba(0, 0, 0, 0.55), 8px -8px 1px rgba(0, 0, 0, 0.5);
        7.3-5 谷歌提前支持 字体轮廓 -webkit-text-stroke: 1px;