前端学习笔记(十七)

第十七章：H5过渡动画和变换

过渡 transition

    提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的
    执行变换的属性： transition-property,
    变换延续的时间： transition-duration,
    在延续时间段，变换的速率变化transition-timing-function,
    linear： 匀速
    ease：（默认值） 慢快慢
    ease in： 慢入
    ease out： 慢出
    ease in out： 慢入慢出
    cubic bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
    变换延迟时间transition-delay。
    简写方式：
    transition: 属性 时间 延迟 速度曲线 , 属性 时间 延迟 速度曲线
    transition:width 2s, height 2s, backgroundcolor
    2s, transform 2s;
    多个属性过渡的时候 用逗号隔开！
    display不支持过渡

动画 animation

    可以为从一个CSS样式配置到另一个CSS样式配置的动画制作动画。动画包含两个组件，一个描述CSS动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。
    可能的值：
    animationname
    动画名称
    animationduration
    持续时间
    animationdelay
    延迟时间
    animationtimingfunction
    运动曲线
    animationiterationcount
    规定动画播放次数！
    infinite无限重复 或者number
    animationdirection
    是否反向播放动画！
    normal： （默认） 正常方向
    reverse： 反方向运行
    alternate ： 动画先正后反方向运行
    alternatereverse：
    先反后正方向
    animation-name动画名称
    div{
        /*动画：动画名称 动画持续时间*/
        animation: move 2s;
    }
    规定动画如何运动，绑定动画，注意写法：
    @keyframes move{
        from{width:100px;backrgound:red;}
        to{width:500px;background:blue;}
        /*0%{} 100%{}*/
        /*0%,20% 80%,100%*/
    }
    animation-play-state: 动画执行状态
    paused 暂停动画
    running 运行动画
    animation-fill-mode: 规定动画的第一帧和最后一帧的状态！
    none （默认） 原始状态>动画>原始状态
    forwards 原始状态>动画>停在动画帧100%
    backwards (忽略原始状态)进入动画帧0%>动画>原始状态
    both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%

变换

    属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）
    1.旋转rotate
    （角度deg）（圈turn）（弧度rad）（梯度grad）
    div{
        transform:rotate();
    }
    变换焦点 transform-origin
    具体的值
    百分比值
    left / top / right / bottom / center
    div{
        transform-origin:x y;
    }

    3.缩放 scale

放大和缩小的倍数 不支持负值！

    div{
        transform:scale(1.2);
    }
    位移 translate
    可以写具体的值px 也可以写百分比！ 写一个值的时候默认识别为X 不会识别成X Y 保留原位置
    div{
        /*两个值写法 中间用逗号隔开*/
        transform:translate(X,Y);
        /*一个值写法*/
        transform:translateX();
        transform:translateY();
    }
    5.倾斜
    可以用度数，弧度 角度 梯度控制 ，当到一个临界点的时候会消失不见
    div{
        transform:skew(30deg,30deg);
    }
    6.复合写法
    transform 不同的值用空格隔开 括号里面用逗号隔开
    div{
        transform:translate(50px,50px) scale(1.2);
    }
    允许调整大小
    注意：必须要添加overflow:;属性 因为overflow重新检测盒子里面的内容
    overflow值可以是：
    hidden 隐藏
    auto 根据内容决定是否滚动条
    scroll 滚动条
    resize:
    none 默认
    horizontal 水平可以缩放
    vertical 垂直可以缩放
    both 垂直水平都能缩放

boxsizing

    怪异盒模型
    使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为
    加在子元素身上，会重新计算盒子的大小
    box-sizing:border-box;
    计算calc()
    calc()，你就可以通过计算来决定一个CSS属性的值.
    可以使用 + - * / 四则运算 也可以加括号
    运算符号前后必须要有空格
    在实际的开发中需要加上兼容性前缀，前缀加在calc 前面
    而真正在计算的时候 我们要把所有的距离都考虑进去 如：边框 内边距 等…
    div{
        width:-webkit-calc(100% - （100px - 50px）);
        width:-moz-calc(100% - (25px * 2));
    }