Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我可以使用transform作为transition-property的值吗?

我可以使用transform作为transition-property的值吗?
EN

Stack Overflow用户
提问于 2013-07-02 15:06:44
回答 3查看 1.1K关注 0票数 5

我可以使用transform作为transition-property的值吗?

代码语言:javascript
运行
AI代码解释
复制
transition-property: transform;

W3C transition standard不会将变换列为可设置动画的值。

事实上,W3C transform standard在表7的“transform”属性中缺少“Animatable:Yes/No”行。

我担心这是不是合法的。

This stackoverflow answer 建议使用transform作为转换属性的值。

我可以使用0%和100%的关键帧获得变换动画,但如果只涉及2个状态,我更喜欢变换而不是动画。

EN

回答 3

Stack Overflow用户

发布于 2013-07-03 15:51:58

您必须为每个引擎指定确切的名称。因此,例如,对于SafariChrome,您应该编写以下代码:

代码语言:javascript
运行
AI代码解释
复制
-webkit-transition-property: -webkit-transform;

以下是JSFiddle中的工作示例。

注意:我使用了transform属性的简写。

票数 2
EN

Stack Overflow用户

发布于 2013-07-02 17:56:50

看起来你可以,但是我不太确定跨浏览器的兼容性。你可以玩玩它,here。使用已经提供的代码,当您将鼠标悬停在红色框上时,它会移动。

票数 0
EN

Stack Overflow用户

发布于 2020-05-08 06:43:06

代码语言:javascript
运行
AI代码解释
复制
selector{
transform: translateX(-100px);
transition:transform 0.4s ease-in-out;
}

从上面的例子中,我们可以看到我们可以使用“

”属性本身作为"transition“属性的值。

因此,我们的平移将顺利进行,而不是立即向左平移100px,平移将是动画。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17429140

复制
相关文章

相似问题

添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档