基於延遲遞歸顯示/隱藏內容

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