取消hover效果_CSS3 transition过渡动画效果

本章主要探讨 HTML5 中 CSS3 的过渡效果，通过这个功能可以不借助 JavaScript 来实现简单的用户交互功能。

一．过渡简介

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：

属性	说明
transition-property	指定过渡或动态模拟的 CSS 属性
transition-duration	指定完成过渡所需的时间
transition-timing-function	指定过渡的函数
transition-delay	指定过渡开始出现的延迟时间
transition	简写形式，按照上门四个属性值连写

我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

设置元素样式

div {

    width: 200px;

    height: 200px;

    background-color: white;

    border:1px solid green;

}

鼠标悬停后背景变黑，文字变白

div:hover {

    background-color: black;

    color: white;

    margin-left: 50px;

}

二．transition-property

首先，设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性&#x