LOSER 的上课笔记 ——动画篇

1.过度

 过渡（transition）[træn'siʒən]

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

        -在某种条件下可以触发，例如hover情况下

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

        -通过过渡可以创建一些非常好的效果，提升用户体验

    属性（4个）

    (1)transition-property ['prɔpəti] 指定执行过渡的属性，多个属性，使用逗号隔开，

            如果所有的属性都要过渡，就使用all关键词，大部分属性都支持过渡效果

            注意过渡时，必须是从一个有效数值向另一个有效数值进行过渡

            只要值可以计算的，就可以过渡

    (2)transition-duration [djuə'reiʃən] 指定过渡效果的持续时间

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

    (3)transition-timing-function: ;过渡的时序函数

                指定过渡的执行的方式

        可选值：  ease  [i:z] 默认值，慢速开始，先加速，然后再减速

                linear 匀速运动

                ease-in 慢速开始，加速运动

                ease-out 快速开始，减速运动

                ease-in-out

                steps()分布执行过渡效果

    (4)transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡

               

       transition：；可以同时设置过渡相关的所有属性，

                只有一个要求，如果要写延迟，则两个时间中,第一个写延迟，第二个写持续时间  

 

 

 

 

2.动画、

第一步：设置关键帧

@keyframes text {

    from表示动画开始位置  也可以使用0%

  from {

    margin-left: 0;

  }

    to动画的结束位置 也可以使用100%

  to {

    margin-left: 500px;

  }

}

第二步 设置animation

1:animation-name

  设置动画的名字，和@keyframs相对应

2:animation-duration

  动画执行时间 duration [djuə'reiʃən]

3:animation-delay

  动画执行延时

4:animation-timing-function

  动画执行的方式

5:animation-iteration-count  [,itə'reiʃən]

  动画执行的次数

      可选值：次数（数字）

            infinite   ['infinət] 无限循环

6:animation-direction

    指定动画运行的方向

        可选值

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

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

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

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

7:animation-play-state

  设置动画的执行状态

        可选值：running 默认值  动画执行

              paused  动画暂停              

8:animation-fill-mode

  动画的填充模式

      可选值：

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

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

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

        both 结合了forwards和ackwards的特点

9：简写模式

animation: text 2s 2 2s alternate-reverse;