上一篇文章用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>
页面效果如下: