web前端：过渡、动画全

过渡

1. 改变内容transition-property：width ；

2. 过渡时间transition-duration：2s ；

3. 简写transition：prorerty 过度时间 过渡速度曲线 延迟时间 ；

4. 延迟过度效果transition-delay：1s ；

5. 过渡速度曲线transition-timing-function：值 ；

   • ease 慢-快-慢

   • linear 相同速度

   • ease-in 缓慢开始

   • ease-out 缓慢结束

   • ease-in-out 开始结束慢

   • cubic-bezier 贝塞尔曲线

6. 旋转transform：rotate（0deg）

动画

1. 动画简写：name 动画时间 变速 延迟时间 循环次数 动画执行方向；

2. @keyframes规则

   • 必须绑定某个元素

   • css定义：

     • @keyframe name{

       • from{ }

       • 50%{ }

       • to{ }

     • }

   • 使用

     • 引用名字 animation-name：name；

     • 动画时间 animation-duration：1s；

     • 动画延迟 animation-delay: 0s;可以负数，已经播放n秒

     • 循环次数animation-iteration-count: 10;

     • 动画执行方向animation-direction：；需要+动画循环次数

       • normal 正常，向前（默认值）

       • reverse 反方向，向后

       • alternate 正反交替【前-后】

       • alternate-reverse 正反交替【后-前】

3. 动画速度曲线animation-timing-function：值 ；

   • ease 慢-快-慢

   • linear 相同速度

   • ease-in 缓慢开始

   • ease-out 缓慢结束

   • ease-in-out 开始结束慢

   • cubic-bezier 贝塞尔曲线

4. animation-fill-mode：；

   • none 默认值

   • forwards 保留最后一个关键帧样式【依赖动画时间、循环次数】

   • backwards 保留第一个关键帧样式【依赖动画执行方向】

   • both 遵循向前向后，扩展动画属性