基于延迟递归显示/隐藏内容

Question

我在想如果有完整的CSS方式来重现以下动画（出现和消失的工具提示框）并再次出现。 我想它是递归

http://bourbon.io/

Answer 1

你可以做到这一点使用的动画特性（带有自定义动画）。

例子：

HTML

<div id="container"> 
    <div id="animatediv"> 
    </div> 
</div> 

CSS

#container { 
    background-color: yellow; 
    display: inline-block; 
    padding: 40px; 
} 

#animatediv { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: relative; 
    animation-name: hideshow; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes hideshow { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

这里有一个的jsfiddle：

https://jsfiddle.net/fabio1983/j6jj9766/

您还可以检查日是页面的更多信息：

https://www.w3schools.com/css/css3_animations.asp