css - 没有悬停的不透明度过渡

Question

我有以下类(class):

.dot{
  width:40px;
  height:40px;
  position:absolute;
  background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
  background-size: 100% 100%;
  z-index:999;
  margin-top:-60%; 
  pointer-events:none; 
}

我这样修改类:

.dot{
  width:40px;
  height:40px;
  position:absolute;
  background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
  background-size: 100% 100%;
  z-index:999;
  margin-top:-60%; 
  pointer-events:none; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

我试图做的是应用一个转换，这样 div 在页面打开时最初不会显示，但在 1 秒后它达到 opacity: 1;。

我做了一些研究，我在 SO 和 Google 上找到的所有内容都与悬停有关。我尝试将“opacity: 0;”应用到我的类(class)，但过渡不会发生，div 将保持隐藏状态。

有什么方法可以使用 CSS 在没有悬停状态的情况下完成不透明度过渡？

Answer 1

您可以使用 CSS3 animation 完成此操作:

.dot{
  width:40px;
  height:40px;
  position:absolute;
  background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
  background-size:100% 100%;
  z-index:999;
  pointer-events:none;
  animation:fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { 
      opacity:0;
    }
    to {
      opacity:1;
    }
}

<div class="dot"></div>