HTML入门07

动画transform

1. transform:translate()位移
   • translateX水平位移
   • translateY垂直位移
   • translate(500px,600px)水平500500px,垂直600px
2. transform:scale()缩放，大于1的是放大，小于1的是缩小
   • transform:scaleX()宽缩放
   • transform:scale()高缩放
   • transform:scale(0.5)总体缩小0.5倍
3. transform:rotate()旋转，单位deg
   • transform:rotateX(45deg)模仿小时候玩单杠
   • transform:rotateY()模仿钢管舞
   • transform:rotate(45deg)模仿大风车
4. transform:skew()倾斜，单位deg
   • transform:skewY(45deg)沿着Y倾斜45度
   • transform:skewX(45deg)沿着X倾斜45度
   • transform:skew(45deg,45deg)沿着XY轴倾斜转换
5. transform-origin：x,y; 改变元素变形时候的作用原点。
   • 水平方向：left、 center、 right；
   • 垂直方向：top、center、bottom;

过渡动画transition

+ 第一个值是动画的属性，可以为all代表所有属性
+ 第二个值是动画时间
+ 第三个是运动曲线，如linear匀速和ease先慢后快再慢，默认为ease
+ 第四个是延迟的时间

transition:height 2s linear 2s;

帧动画animation

+ 第一个值是动画名
+ 第二个是动画时间
+ 第三个是动画运动曲线
+ 第四个是延迟
+ 第五个是循环次数，可以为infinite无限循环或forwards到最后一帧停下，或both 

        .box1{
            width:100px;
            height: 100px;
            background-color: lightpink;
            animation: run 2s linear infinite;
            animation: run 2s linear forwards;
            /* forwards让动画停留在最后一帧 */
            /* backwards如果动画中有延迟，想要迅速以第一帧开始，可以加一个backwards属性 */
            /* both是forwards和backwards的结合 */
        }
        @keyframes run{
            0%{
                transform:translate(0,0);
            }
            25%{
                transform:translate(400px,0);
            }
            50%{
                transform:translate(400px,400px);
            }
            75%{
                transform:translate(0,400px);
            }
            100%{
                transform:translate(0,0);
            }

单位vw

100vw代表的是整个屏幕的宽
1vw代表的是屏幕宽的百分之1