过渡和动画

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

• 一、过渡
  • 1.transition四个属性
  • 2.transition简写语法
  • 3.过渡动画(动画类型/动画速度)
• 二、动画
  • 1. 定义动画的关键帧引
  • 2.应用动画-简写 
  • 3.应用动画的各个属性
  • 4.伴随动画而产生的3个事件
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、过渡

过渡 transition

可以实现元素不同状态间的平滑过渡，让数值类属性的变化不在是瞬间完成！

1、transition四个属性：

1、transition-property ： 检索或设置对象中的参与过渡的属性

       值：

•         none 没有属性获得过 渡效果
•         all 所有属性都参与过 渡 默认值
•         property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤空格隔开

2、transition-duration： 检索或设置对象过渡的持续时间 

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

3、 transition-timing-function： 检索或设置对象中过渡的动画类型

值：

• ease： 快-慢-快。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• linear 匀速运动 ease-in 先慢后快 加 速运动 ,ease-out 先快后慢 减 速运动 ,ease-in-out 以慢速开 始和结束的过渡效果
• steps()分布执⾏过渡 效果
• cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值

4、transition-delay： 检索或设置对象延迟过渡的时间 

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

2、transition 简写语法：

        transition: 属性1 时间 动画类型 延迟

        写多个过渡效果：

        transition: 属性1 时间 动画类型 延迟时间[,属性2 时间 动画类型 延迟时间,属性3 时间 动画类型 延迟时间]   

 3、过渡动画(动画类型/动画速度)

• linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease： 快-慢-快。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

二、动画

1.定义动画的关键帧

@keyframes 动画名称{
            from { Properties:Properties value; }
            百分比 { Properties:Properties value; }
            ....
            to { Properties:Properties value; }
        }

@keyframes 动画名称{
            0% { Properties:Properties value; }
            百分比 { Properties:Properties value; }
            ....
            100% { Properties:Properties value; }
        }

2.应用动画 - 简写

animation: 动画名称 时长 动画速度 延迟 执行次数 执行方向;

3、应用动画的各个属性

• animation-name:  动画名称
• animation-duration: 动画时长
• animation-timing-function: 定义动画的速度，时间的单位：s和ms ,1s=1000ms
• animation-delay: 延迟时间
•  animation-iteration-count: 10 | infinite;  表示无限次循环    定义动画执行多少次
• animation-direction: alternate; 定义动画的执行方向

值：     normal:默认值，执行完毕之后瞬间恢复最初始状态
            reverse:动画反向执行
            alternate:动画正向执行完毕，在反向执行动画；
            注意：设置此属性之后正向算一次动画反向算一次动画，所以如果设置动画执行1次，此属性值不生效；
            alternate-reverse:动画先反向执行，在正向执行；
            注意：设置此属性之后反向算一次动画正向算一次动画，所以如果设置动画执行1次，只会执行反向一次动画；

• animation-fill-mode: 定义动画的终止状态

        一个动画执行完毕的默认状态是什么？就是初始状态！
            forwards: 应用动画的最终状态
            backwards: 在delay延迟期间，应用你定义的第一帧的状态

•  animation-play-state: 控制动画的执行状态

            paused      指定暂停动画    
            running     指定正在运行的动画

4、伴随动画而产生的3个事件

• animationstart 动画开始事件
•         animationiteration  动画反复执行事件

            动画反复执行事件需要指定animation-iteration-count属性，如果值为1，则不触发反复执行事件！

•         animationend  动画结束事件

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。