前端Hover与动画过渡结合

1.Hover（伪类）的含义：

伪类在鼠标移到元素上时向此元素添加特殊的样式。

2. transition动画过渡的含义：

transition是一个复合属性，包含以下几个子属性：

• transition-property：指定过渡或动态模拟的CSS属性；
• transition-duration：指定过渡完成所需的时间；
• transition-timing-function：指定过渡函数；
• transition-delay：指定开始出现的延迟时间；
  

过渡效果的时间曲线：

ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。
linear：元素样式从初始状态过渡到终止状态速度是恒速的（平均速度）。
ease-in:元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。称之为渐显效果。
ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。称之为渐隐效果。
ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称之为渐显渐隐效果。

案列：

HTML 源代码：

    
    
[热点]丝绸之路起点城市西安观察

CSS样式表：

实现效果：

用红色矩形圈住的是过渡动画，transition: all(所有属性) 0.5s（过度的时间）ease过度属性（元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢）

用紫色矩形圈住的是position定位，如果这个元素不使用定位，那么当鼠标移入到伪类元素里面其他的元素就会被撑开，使用了定位就是相当于把这个元素从页面中拿出来不占页面的位置，自然也就不受其他元素的影响。

当鼠标移入img元素之后就会触发hover伪类里面写的样式，那么这个触发过程就会发生过渡动画，过渡的作用就是看起来有一个变化的过程。

谢谢观看，如有侵权请联系我删除，如有不足的地方希望指出。