不断创造，加速成长！这是我参加“掘金每日新计划·6月更新挑战”的第四天，点击查看活动详情
大家好，我是法医，不是做尸检的法医，而是写代码的法医。 哈哈，明天我会为大家带来使用 CSS3 基础知识的过渡和动画。
CSS3 过渡
CSS3添加了新的transition属性，可以使从一种状态到另一种状态的转变更加平滑。
CSS3的转场功能就像金莎饼干，丝滑可口，哈哈♀️
这就是 W3C 标准中描述转换的方式。 CSS3过渡允许CSS属性值在一定的时间间隔内平滑过渡。 这些效果可以在键盘点击、获得焦点、对元素进行任何更改时触发，并通过动画效果平滑地更改 CSS 属性值。
我们先看一个快速入门的例子，如下：
code.juejin.cn/pen/7102227…
在前面的代码中，我们让div在悬停时改变长度，可以看到效果特别糟糕。
此时我们可以在CSS3中添加一个新的属性transition，让两种状态之间的过渡变得平滑。
code.juejin.cn/pen/7102228…
接下来我们来看看转折的具体句型。
转换属性是一个复合属性，它是转换属性、转换持续时间、转换计时函数和转换延迟的缩写。
过渡性质
该属性用于指定过渡动画的属性名称。 可选值为none、all、property。
需要注意的是，并非所有属性都可以转换。 只有具有中点值的属性才能产生过渡效果。 因为这样可以通过不断改变中间值来达到过渡的效果。 例如，display:none|block 没有中间值，因此很难应用转换。
可以过渡的属性类型包括颜色属性、具有宽度值或比例的属性、阴影和变形系列属性。 支持transition的具体属性请参考下表：
转换定时函数
该属性用于设置从一个属性转换到另一属性所需的时间。 单位时间为秒（s）或微秒（ms）。 默认值为 0。
转换定时函数
该属性用于设置过渡速率css3新增过度属性，也就是俗称的贝塞尔曲线。 它具有以下值：
转换延迟
触发之前转换会延迟多长时间？ 单位是秒或微秒。 不过，该值可以是正整数、负整数和0。正整数和0都更容易理解。 我们主要讨论负整数。 负整数的估计将基于总体转换时间。 添加于
code.juejin.cn/pen/7102250…
多个元素之间的过渡
如果你想同时对多个CSS3属性应用过渡效果，只需用冒号分隔它们即可。 这些主要是针对各个属性的过渡时间不同的情况。
举个栗子：
背景颜色过渡时间为0.5s，长度过渡时间为0.3s：
code.juejin.cn/pen/7102251…
转型动荡
有时，转场效果完成后需要执行JS中的某些操作。 此时storm类型为我们提供了transitionendstorm，方便我们监听transition效果是否结束css3新增过度属性，如：
code.juejin.cn/pen/7102259…
CSS3动画
CSS3中添加了一个新的动画属性，可以创建类似flash的动画。
举个栗子：
code.juejin.cn/pen/7102297…
在前面的代码示例中，我们声明了一个名为 square 的动画，然后在 div 中使用了该动画。 整个动画的播放时间为5秒。
使用CSS3动画制作动画包括两部分：一是使用关键帧声明动画，二是在动画中调用关键帧声明的动画。
