Question

我有以下课程：

.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上找到了所有的东西，谷歌与徘徊有关。我尝试应用＆＃34; opacity: 0;＆＃34;在我的班级，但过渡不会发生，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>

Answer 2

您可以使用css动画实现此目的。

使用@keyframes规则设置动画。为了说明这个例子，我删除了保证金顶部;这不是代码中的必要更改。

.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;
  animation: fadein 1s ease-in;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

Answer 3

是的，请使用JavaScript触发转换。那就是你问题的答案。仅当有要过渡的东西时才会发生过渡。仅在元素上分隔过渡不会触发过渡。变化确实。第一次加载元素时，没有任何要过渡的对象。

不悬停的不透明度转换

3 个答案: