上一篇文章用CSS3实现了一个提示工具，本文介绍如何利用CSS3实现提示工具以渐入的方式呈现，以渐出的方式消失。

CSS3主要可以通过两个样式来实现动画效果：animation和transition。

其中，animation需要自己定义一组关键帧从而实现动画，例如：

@keyframes fadein {
  from { 
    opacity: 0;
  }
  to { 
    opacity: 1;
	visibility: visible;
  }
}
@keyframes fadeout {
   from { 
      opacity: 1;
	  visibility: visible;
  }
  to {
      opacity: 0;
	  visibility: hidden;
  }
}
.tooltip .tooltiptext {
    visibility: hidden;
    animation:fade 1s infinite;
}
.tooltip:hover .tooltiptext {
    animation: fadein 2s 1;
}

上面的css中fadein和fadeout定义了两组动画关键帧（其中每组关键帧中样式组的名称“from”、“to”其实是可以自己随便写的，只要不违反CSS命名规则即可），每一组关键帧实际上就是一个动画，fadein和fadeout就是动画的名称。完成动画定义后，在需要播放动画的元素的CSS中用样式animation即可播放，它的参数包括要播放的关键组（动画）名称、持续时间和重播次数（infinite表示无限循环播放）。如上面的定义就可以在鼠标进入工具元素区域时让提示文本渐入，鼠标移出工具元素区域时让提示文本渐出。还可以通过“,”分隔在animation样式中播放多个动画。

animation动画可以精确控制动画的关键帧，但是编写CSS比较复杂。在提示工具这个用例中显然没必要弄得这么复杂，因此，可以用自动生成关键帧的transition样式来编写。

在上文中的animation动画中，我们使用了visibility和opacity两个属性来控制tooltiptext的显示与隐藏。这主要是由于visibility样式在hidden和visible之间没有过渡状态，因此，无法通过transition产生平滑渐入渐出式动画，也无法在关键帧组中自己定义出一个中间状态，它只会在到了播放时间时突然出现或者消失，而opacity则从0到1之间有无限个可用的连续值作为中间状态。

使用transition样式来实现tooltiptext的渐入渐出可以按如下方式定义：

.tooltip .tooltiptext {
    visibility: hidden;
	opacity: 0;
	transition: opacity 2s linear,visibility 2s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
	opacity: 1;
	transition: opacity 2s linear;
}

可以看出来transition比animation的CSS定义要简洁得多，但是与animation对tooltiptext的visibility和opacity的初始定义要求并不严格不同的是，transition则必须要严格定义好tooltiptext的visibility和opacity的初始值。

transition 属性是一个简写属性，用于设置四个单独的过渡属性：

transition-property

//设置过渡动画的CSS属性名，如opacity，也可以用all表示所css有属性

transition-duration

//设置过渡动画完成的时间，单位可以用ms（毫秒）和s（秒）

transition-timing-function

//设置生产关键帧的方式

transition-delay

//设置动画延迟时间，如1s表示延迟1秒后开始过渡动画

其中，transition-timing-function的取值和含义如下：

属性值

值描述
ease

默认值。规定缓慢开始，然后快速，再然后缓慢结束的过渡效果。

相当于：cubic-bezier(0.25, 0.1, 0.25, 1) 。

linear

规定从开始到结束速度相同的过渡效果。

相当于：cubic-bezier(0, 0, 1, 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)

在三次贝塞尔函数中定义您自己的值。

可能的值是从 0 到 1 的数值。

initial将此属性设置为其默认值。请参阅 initial。
inherit从其父元素继承此属性。请参阅 inherit。

完整演示页面如下：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>tooltip的渐入与渐出</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
			background-color: aqua;
		}

		.tooltip .tooltiptext {
			width: 140%;
			background-color: gray;
			text-align: left;
			text-indent: 2em;
			border-radius: 0.5em;
			padding: 0.2em 0.1em;
			color: #ff0;
			top: 1.5em;
			left: 1em;
			/* 定位 */
			position: absolute;
			z-index: 1;
			/*动画效果*/
			visibility: hidden;
			transition: opacity 2s linear, visibility 2s;
			opacity: 0;
		}

		.tooltip:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
			transition: opacity 2s linear;
		}
	</style>
</head>

<body>
	<div class="tooltip">工具元素
		<span class="tooltiptext">搜索后如有匹配内容高亮，请清空搜索框消除高亮，以免高亮标记被笔记保存。</span>
		<input type="text" placeholder="搜索...">
	</div>
	<span>相邻元素</span><br>
	<div>下方的元素</div>

</body>

</html>

页面效果如下：

# css3 # 前端 # css
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区