CSS transition

系统教程 行业动态 更新时间:2024-06-14 17:03:54
CSS transition-property的允许属性(Allowed properties for CSS transition-property)

是否有可以使用CSS3过渡转换的事实性属性列表? 例如,显示属性当前无法转换,但可见性可以(尽管从隐藏到可见,没有持续时间)。

MDN上有一条说明:

注意:可以设置动画的属性集可能会发生变化; 因此,您应该避免在列表中包含当前没有动画的任何属性,因为有一天它们可能会导致意外结果。

但是,我无法从过渡属性规范中看到当前允许的属性。

这纯粹是为了浏览器实现还是在某处定义?

Is there a de facto list of properties that can be transitioned using CSS3 transitions? For example the display property cannot currently be transitioned but visibility can (although just from hidden to visible with no duration).

There is a note one the MDN that says:

Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don't currently animate, because someday they might, causing unexpected results.

However, I can't see from the transition-property spec which properties are currently allowed.

Is this down purely to browser implementation or is it defined somewhere?

最满意答案

对于创建CSS Transitions Module时存在的属性,可以在规范本身中找到该列表:

http://www.w3.org/TR/css3-transitions/#animatable-properties

对于将来的属性或对现有属性的未来更改,请参阅规范中的Animatable行的属性:

对于开发此规范时存在的属性,此规范定义它们是否以及如何设置动画。 但是,未来的CSS规范可能会定义其他属性,现有属性的附加值或现有值的其他动画行为。 为了描述新的动画行为并在更合适的位置定义动画行为,未来的CSS规范应该在属性定义的摘要中包含“Animatable:”行(除了[CSS21中描述的其他行] ],第1.4.2节)。 这行应该说“no”表示属性不能被动画或者应该引用动画行为(可能是上面属性类型动画部分中的行为之一,或者可能是新行为)来定义属性动画。 这些定义优先于本说明书中给出的定义。

例:

在此处输入图像描述

MDN本身也有一个列表。

For the properties that existed at the time of creating the CSS Transitions Module, the list can be found in the specification itself:

http://www.w3.org/TR/css3-transitions/#animatable-properties

For future properties or future changes to existing properties, refer to the properties in the specification for an Animatable line:

For properties that exist at the time this specification was developed, this specification defines whether and how they are animated. However, future CSS specifications may define additional properties, additional values for existing properties, or additional animation behavior of existing values. In order to describe new animation behaviors and to have the definition of animation behavior in a more appropriate location, future CSS specifications should include an "Animatable:" line in the summary of the property's definition (in addition to the other lines described in [CSS21], section 1.4.2). This line should say "no" to indicate that a property cannot be animated or should reference an animation behavior (which may be one of the behaviors in the Animation of property types section above, or may be a new behavior) to define how the property animates. Such definitions override those given in this specification.

Example:

enter image description here

There's also a list on the MDN itself.

更多推荐

本文发布于:2023-04-24 14:21:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/dzcp/0b7de95bc5a9f7ef69680d67207b9893.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:CSS   transition

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!