Html CSS 3-获取属性上的转换：显示

在属性显示中使用过渡效果时，我遇到了一个小问题：

我正在Safari上测试：

input.input_field {
    display:none;
    transition-property: display;
    transition-duration: 2s;
    -webkit-transition-property: display; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
    display:block;
}

但是这个例子现在不起作用，有人知道为什么我不能使用属性：display

---

你好

您只能对可缩放属性执行转换，即存在于任意两点相关范围内的数字定义属性（可能有测量单位，也可能没有测量单位）。这样做的原因是，为了执行转换，浏览器将获取提供的起点和终点，然后外推临时关键帧，从而生成生成的动画

显示属性是不可伸缩的，它只是“开”或“关”，事实上，更具体地说，它有许多与任何形式的缩放无关的属性。因此，无法推断中间值。您也可以这样看待它，

display

也是一种布局，而不是视觉样式，尽管它确实具有视觉内涵。只能对视觉样式执行转换

根据您的要求，您可以在

不透明度

或

高度

（或宽度）上执行转换

---

您可以结合使用

可见性

代替

显示

，并使用

不透明度

作为淡入效果

可见性

是可转换的，尽管它也只有开/关状态，但您可以使用转换延迟来影响它

HTML

<button>Hover</button>

<div class="wrap">


</div>

---

display

属性是不可转换的。因此，在这种情况下，我可以使用什么属性？它只是显示具有效果的输入字段..取决于您尝试执行的操作。如果需要淡入效果，请查看

不透明度

。检查此链接，希望您能从中获得解决方案。

.wrap {
    width:100px;
    height:100px;
    border:1px solid grey;
    background-color: #bada55;
    margin-top: 25px;
    visibility:hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s,
                opacity 0.35s linear;
}

button:hover + .wrap {
  visibility:visible; /* show it on hover */
  opacity:1;
  transition-delay:0; 
}