CSS3过渡动画实现hover人物弹出炫酷效果案例

我们要实现的目标效果如下

可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

过渡共有四个属性，分别是：

transition-property： 规定应用过渡的 CSS 属性的名称 transition-duration： 定义过渡效果花费的时间。默认是 0 transition-timing-function： 规定过渡效果的时间曲线。默认是 “ease” transition-delay： 规定过渡效果何时开始。默认是 0

其中，transition-property和transition-duration是必填的，否则动画无法生效

transition-property属性指定CSS属性发生变化时的过渡效果（注意，不是所有css属性都支持过渡），过渡属性取值如下：

none：没有属性会获得过渡效果。

all：所有属性都将获得过渡效果。

property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

例：

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

例：

transition-timing-function：属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度，取值：

linear： 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease： 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in： 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out： 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out： 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)： 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

补充最后一个贝塞尔曲线速度曲线生成网站：https://cubic-bezier.com/

写法：

transition-delay 属性指定何时将开始切换效果。transition-delay值是指以秒为单位（S）或毫秒（ms）

例：

直接使用transition属性即可实现简写，写法如下

transition: property duration timing-function delay;

步入正题，该如何实现开头的效果呢，话不多说，直接上代码

代码可以直接运行，记得改自己的图片地址