过渡

过渡的基本使用

transition过渡

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

兼容性

过渡从IE10开始兼容，移动端兼容良好
网页上的动画特效基本都是由javaScript定时器实现的，现在逐步改为css3过渡
优点：动画更细腻，内存开销小

transition属性基本使用

transition属性4要素

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

可以参与过渡的属性：

所有数值类型的属性都可以参与过渡，比如width、height、left、top、boder-radius
背景颜色和文字颜色都可以被过渡
所有的变形（包括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的最终位置有差异

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

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

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;
   }
 }

第三模块

学习心得：

关于踏实，今天才算是有了比较深刻的理解。不是嘴上说自己踏实能干，不盲目着急，不做一点把握都没有但是对自己影响很大的事情，不要想着什么事情赌一把也许会有好的结果。于是我决定自己的实习如果有机会就要延长，不要匆匆结束，而且不止要延长，要再接下来的工作中有所得，有所建树，有所收获，有所贡献。

第四模块

学习完打卡截图：

【金秋打卡】第6天 前端工程师学习笔记

过渡