课程信息

    课程名称：前端工程师

    课程章节：过渡与动画

    课程讲师：

课程内容：

过渡

过渡的基本使用

transition过渡

transition过渡属性是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性

• 过渡从IE10开始兼容，移动端兼容良好

• 网页上的动画特效基本都是由javaScript定时器实现的，现在逐步改为css3过渡

• 优点：动画更细腻，内存开销小

transition属性基本使用

• transition属性4要素

               动画时长        延迟时间
   transition:   width   1s   linear    0s;
            需要过渡的属性     变化速度曲线（缓动参数）

• 可以参与过渡的属性：

1. 所有数值类型的属性都可以参与过渡，比如width、height、left、top、boder-radius

2. 背景颜色和文字颜色都可以被过渡

3. 所有的变形（包括2D和3D）都能被过渡

• all：如果要所有属性都参与过渡，可以写all

   transition: all 1s linear 0s;

• 过渡的四个小属性

  属性	意义
  transition-property	哪些属性要过渡
  transition-duration	动画时间
  transition-timing-function	动画变化曲线（缓动效果）
  transition-delay	延迟时间

• transform属性的覆盖问题

  对同一个元素设置多个transform属性时，后面的transform会覆盖前面的，而不会叠加

  

  假设元素初始时是旋转90deg，我们想要实现鼠标移入时，让其保持旋转状态向下运动100px，则需要如下这样写：

  

• transform属性值书写顺序问题

  如下代码，两个div的最终位置有差异

  

  

原因是元素旋转后，会改变轴线的方向

div2先旋转造成x轴也跟着旋转，方向如下：

此时再设置translate(300px)，则是在旋转后的轴线上移动300px，如下：

而div1是先沿着水平的x轴移动300px，再旋转30deg

二者的轴线方向不同，所以最终效果也不同

过渡的缓动效果

• 缓动参数

• transition的第三个参数就是缓动参数，也是变化速度曲线

• 常用缓动参数

  
  

• 贝塞尔曲线

  网站https://cubic-bezier.com可以生成贝塞尔曲线，可以自定义动画缓存参数

   transition:width 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) 0s;

动画

动画的定义和调用

• 使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

   @keyframes r{/* 定义动画 r-动画的名字*/
    from{/* 起始状态 */
     transform: rotate(0);
    }
    to{/* 结束状态 */
     transform: rotate(360deg);
    }
   }

• 定义动画之后，就可以使用animation属性调用动画

   animation: r 1s linear 0s;  /* 动画名字 总时长 缓动效果 延迟 */

动画的执行次数

• 第五个参数就是动画的执行次数

   animation: r 1s linear 0s 3;

• infinite 永远执行

   animation: r 1s linear 0s infinite;

• alternate 让动画的第2、4、6……偶数次自动逆向执行

   animation: r 1s linear 0s alternate;

• forwards 让动画停止在最后结束状态

   animation: r 1s linear 0s forwards;

多关键帧动画

 @keyframes changeColor{
   0%{
     background-color:red;
   }
   20%{
     background-color:yellow;
   }
   40%{
     background-color:blue;
   }
   60%{
     background-color:green;
   }
   80%{
     background-color:purple;
   }
   100%{
     background-color:orange;
   }
 }