CSS Day11- 动画

11.1 动画语法

​

    
    
    
    

​

    


​

• 设置动画的类型 animation-timing-function: linear; ease 默认值 平滑动画 linear 线性过渡 ease-in 从慢到快 ease-out 从快到慢 ease-in-out 慢 快 慢 steps 分步执行

• 设置动画的执行次数 animation-iteration-count: 1; 参数值可以是数字 infinite 无限次循环（常用）

• 动画执行的方式 animation-direction: alternate-reverse; normal 默认值 从from到to运行，每次都是这样 reverse 从to到from运行，每次都是这样 alternate 从from到to运行，重复执行时动画会反向执行 alternate-reverse 从to到from运行,重复执行时动画反向执行

• 动画填充模式 animation-fill-mode: backwards; none 默认值 动画执行完毕0，回到原来的位置 forwards 动画执行完毕时，会停留在动画结束的位置 backwards 动画执行完毕时，回到开始的位置

11.2 过渡

过渡和动画类似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行

.box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /*opacity: 0;*/   /* 不透明度 */
            /* 动画和过渡相似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行 */
​
            /* 第一步 设置哪个属性需要过渡效果 
             transition-property 设置需要过渡的属性，属性之间用逗号（,）隔开
                 all代表所有需要过渡的属性
            */
            /* transition-property: height, width, background-color, opacity; */
            transition-property: all;
            /* 设置过渡时间 */
            transition-duration: 1s;
        }
​
        .box:hover {
            height: 200px;
            width: 200px;
            background-color: orange;
            opacity: 1;
        }

• transition-timing-function 过渡的类型

  ease默认值 平滑过渡

  ease-in 先慢后快

  ease-out 先快后慢

  steps()分布执行过渡效果

  可以设置一个第二个值

  end，在时间结束时执行过渡（默认值）

  start，在时间开始时执行过渡