Question

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

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

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

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

但是......当试图为top，left，bottom，right属性设置动画时，我似乎无法在不预设属性值的情况下实现动画

.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
}

是否必须预设属性值？哪些属性需要预设，哪些属性可以自动动画？

Answer 1

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

默认top为top: auto;（ source ），因此您必须在制作动画之前为其声明数值，因为CSS不知道如何从auto过渡到 number 。

另一方面，

opacity的默认设置为opacity: 1（ source ），因此您可以在不先设置值的情况下为其设置动画。

Answer 2

默认情况下，{c} opacity 1 top, left, bottom, right position与auto配合使用，因此您必须为它们分配值，默认情况下为{{1} }像top:auto;。

Answer 3

默认情况下opacity : 1

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

默认情况下top: auto，有什么区别？这里：

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

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

这意味着它会因浏览器大小而异。但不透明度特定于1允许动画从1到0工作。

Answer 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

CSS过渡动画而不预设属性值

4 个答案: