CSS动画中的样式中的过渡属性

1.什么是过渡属性？

过渡属性是一个不需要web前端使用js语言去编写程序，直接使用css样式就可以实现简单的动画效果。在该属性的加持下，可以让一些动画效果看起来更加顺滑。

transition CSS属性其实是 transition-property（过渡或动态模拟的CSS属性） ， transition-duration（完成过渡所需要的时间） ，transition-timing-function （指定过渡函数） 和 transition-delay（过渡开始出现的延迟时间） 的一个简写属性。

2.transition-property

定义转换动画的CSS属性名称

property：指定的CSS属性（width、height、background-color属性等）

第一步，设置属性

！ 这是还没有鼠标悬浮前

 ！ 这是鼠标悬浮后

 3.transition-duration

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

第一步：我们把刚刚的transition-property宽度改成高度，并设置长度变成400px需要3s

！ 这是原图

 ！ 这是变换3s后的样子

    4.transition-timing-function

linear  规定以相同速度开始至结束的过渡效果

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)

ease-out    规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)

ease-in-out 规定以慢速开始和结束的过渡效果

第一步：我们拿ease-in 来设置，它的效果是慢速开始 后面结束时会变快

 ！ 这是原图

  ！ 这是使用ease-in过渡方式，过渡时间为3s

   5.transition-delay

表示动画开始时的延迟时间

第一步：我们再加个 transition-delay: 2s;设置个开始时延迟为2s

  ！ 这是原图

 

   ！ 这是等待1秒后，使用ease-in方式，过渡时间为3s

 

 虽然效果不是很明显，希望大家能理解它的含义，谢谢！