无需预设属性值的 CSS 过渡动画答案

【问题标题】：CSS transition animate without presetting property value无需预设属性值的 CSS 过渡动画
【发布时间】：2017-11-14 02:37:41
【问题描述】：

是否可以使用CSS 为元素设置动画，但不定义元素CSS 属性的初始状态？

在某些情况下它似乎有效 - 例如，如果我将不透明度设置为 0

.class{
   transition : all 1s ease-out;
}

.class-after{
   opacity : 0 // this works even without setting the initial opacity to 1
}

但是...当尝试为上、左、下、右属性设置动画时，如果不预设属性值，我似乎无法实现动画

.class{
   transition : all 1s ease-out;
}

.class-after{
   top : 100px; // this doesn't work without .class-before
}

.class-before{
   position : relative;
   top: 0px; // setting the initial value will cause it to work
}

预设属性值是必须的吗？哪些属性需要预设，哪些可以自发设置动画？

【问题讨论】：

默认opacity : 1
是的，您不能从 auto 值转换。 left、right 等默认为 auto，您无法对其进行转换。 opacity默认是1，所以不用初始设置就可以转换。

标签： html css animation

【解决方案1】：

具有数字默认值的属性可以在不首先实例化其值的情况下进行动画处理。

top 的默认值为top: auto; (source)，因此您必须在动画之前为其声明一个数值，因为 CSS 不知道如何从 @987654325 转换@ 到 number.

另一方面，opacity 的默认值为 opacity: 1 (source)，因此您无需先设置其值即可对其进行动画处理。

【讨论】：

【解决方案2】：

在css中默认opacity是1和top, left, bottom, right是使用position所以你必须为他们分配一个值，默认他们是auto像top:auto;。

【讨论】：

【解决方案3】：

默认opacity : 1

参考号：https://www.w3schools.com/cssref/css3_pr_opacity.asp

和默认top: auto，有什么区别？这里：

auto 让浏览器计算顶部边缘位置。这是默认的

参考号：https://www.w3schools.com/cssref/pr_pos_top.asp

这意味着它因浏览器大小而异。但是 opacity 它是特定于 1 的，它允许动画从 1 工作到 0。

【讨论】：

【解决方案4】：

当您使用 Firebug/ChromeDevtools 检查时，会自动设置属性。例如Opacity 将是默认的1，因为不可见元素没有那么有用。

https://www.w3schools.com/cssref/css3_pr_opacity.asp

另一方面，Position 确实获得了默认值 auto。所以过渡不能计算任何动画。

https://www.w3schools.com/cssref/pr_pos_top.asp

【讨论】：