CSS过度与动画效果

过渡

过渡的理解

过渡（transition）

        -通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡

        -需要在某种条件下触发，例如hover、active、focus情况下

        -一次性的效果，不能循环，只能做简单的动画

        -只有两帧，设置动画初始值和结束值

        -IE10开始兼容，移动端兼容良好

属性：

transition-duration

语义：指定过渡效果的持续时间（必填）

可选值：时间的单位 s和ms 1s=1000ms

transition-property

语义：哪些属性要过渡（选填）

可选值：

        none 没有属性获得过渡效果

        all 所有属性都参与过渡（ 默认值）

        property 自定义应用过渡效果，一个或多个，用逗号隔开

注意：

1、所有数值类型的属性，都可以参与过渡，

比如width、height、left、top、border-radius、opacity,颜色等

2、从一个有效数值向另一个有效数值进行过渡

transition-timing-function

语义：过渡变化曲线（缓动效果）（选填）

可选值：

        ease 慢速开始，先加速，然后再减速 （默认值）

        linear 匀速运动

        ease-in 先慢后快 加速运动

        ease-out 先快后慢 减速运动

        ease-in-out 以慢速开始和结束的过渡效果

        steps() 分布执行过渡效果

        cubic-bezier(n,n,n,n)立方贝塞尔曲线函数，值是0-1之间的数值

transition-delay

语义：过渡效果的延迟，等待一段时间后执行过渡（选填）

可选值：时间的单位 s和ms 1s=1000ms 默认是0

过渡简写

transition：；

过渡时间是必写

如果要写延迟，则两个时间中,第一个写过渡时间，第二个写延迟时间

空格隔开即可

自定义动画

动画的理解

动画和过渡类似，两者的区别

1、过渡必须有触发条件，例如hover，acitve时，动画可以自动触发动画

2、过渡只有开始和结束帧，动画可以设置复杂过程

3、过渡只能执行一次，动画可以自定义执行次数

设置关键帧

    @keyframes name {
      from {
        css样式
      }

      percent {
        css样式
      }

      to {
        css样式
      }
    }

    或者
    
    @keyframes name {
      0% {
        css样式
      }

      50% {
        css样式
      }

      100% {
        css样式
      }
    }

注意：

1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置

2、可以同时设置关键帧，用逗号（,）隔开就行

属性：

animation-name

语义：绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画 (必填)

设置动画的名字，和@keyframs相对应，可以设置多个动画，逗号隔开，应用多个动画

animation-duration

语义：动画的完成时间，告诉系统动画持续的时长（必填）

可选值：时间单位 s ms

animation-timing-function

设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型）

可选值：

        ease 逐渐变慢（默认）

        linear 匀速

        ease-in 加速

        ease-out 减速

        ease-in-out 先加速后减速

        steps() 分布执行过渡效果

        cubic-bezier(n,n,n,n) 立方贝塞尔曲线函数，值是0-1之间的数值

animation-delay

语义：动画在启动前的延迟间隔

默认0s

animation-iteration-count

语义：动画的播放次数，告诉系统动画需要执行几次

可选值：

        n 定义动画播放n次

        infinite无限次往返执行

animation-direction

语义：指定是否应给轮流反向播放动画

可选值

        normal 默认值： 从from向to运行，每次都是这样

        reverse 从to到from运行，每次都是这样

        alternate 从from向to运行，重复执行动画时反向执行

        alternate-reverse 从to向from运行，重复执行动画时反向执行

animation-fill-mode

语义：规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式

可选值：

        none 动画执行完毕 元素回到原来的位置（默认值）

        forwards 动画执行完毕，会停止在动画结束的位置

        backwards 动画延时等待时，元素就会处于开始位置

        both 结合了forwards和backwards的特点

animation-play-state

语义：告诉系统当前动画是否需要暂停

可选值：

        running 默认值 动画执行

        paused 动画暂停

简写：

animation：；

名称 、动画持续的时间必写其他属性选填

变形2D

变形的理解

变形属性transform：translate() scale() rotate() skew()；

变形不会影响到页面的布局

尽量变形写在一个transform里，下面会覆盖上面的transform

可选值：

        位移—translate()

        缩放—scale()

        旋转—rotate()

        倾斜—skew()

位移 transform: translate();

translate(参数1，参数2)

参数值1:是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，

参数2:是指在y轴上移动的距离，正值向下，负值向上，参数2默认为0

translateX()沿着x轴方向平移

translateY()沿着y轴方向平移

translateZ()沿着z轴方向平移 结合视距起作用.不能是百分比数值（3d变化）

注意：

1、平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的

2、位移的参考原点是元素的原来所处的位置

3、如果是通过active进行位移，执行完毕后会还原

4、 不会影响别的元素

5、对于行内元素是没有效果的

旋转transform: rotate();

默认情况下是绕着中心点进行转动的；

默认的单位是deg，比如rotate（45deg）

如果这个值为正值，则是元素对原点中心顺时针旋转；

反之如果这个值为负值，元素对原点中心进行逆时针旋转。

可以单独对x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。

        rotateX() ，指元素围绕其 X 轴以设定的度数进行旋转

        rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转

        rotateZ() , 元素围绕其 Z 轴以设定的度数进行旋转

缩放 transform:scale();

缩放属性是让元素根据中心原点对对象进行缩放。

默认值是1，这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个属性值：

        只有一个值的时候第二个值和第一个值是相等的；

        两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

单独对x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。

        transform:scaleX();元素只在x轴上缩放元素

        transform:scaleY();元素只在y轴上缩放元素

也不会影响其他盒子

倾斜 transform:skew();

倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。

        一个参数时：表示x轴的倾斜x角度,y轴默认为0；

        两个参数时：第一个参数表示x轴的倾斜角度，第二个参数表示y轴的倾斜角度。

变形的单位是deg

        x值：为正则向左变形，为负则向右变形

        y值：为正则向上变形，为负则向下变形

以上是以左上角为参照向左向右，向上，向下变形

可单独对x轴y轴进行设置：这里的X/Y也是是需要大写的。

        transform:skewX() ；

        transform:skewY()；

变形原点 transform-origin:();

原点就是元素的中心，通过 transform-origin 改变原点的位置

用变形原点 transform-origin属性，该属性只有在设置了transform属性的时候会起作用

设置偏移量值都是从元素左上角开始的

transform-origin也有两个属性值：

transform-origin:（水平方向 垂直方向），默认值transform-origin:（center center）

值可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值