CSS3实现提示工具的渐入渐出效果及CSS3动画简介

本文链接：https://blog.csdn.net/yivifu/article/details/140484562

上一篇文章用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样式中