[英]How to transition only rotate transformation?
I'm using a bunch of elements to compose a background image and they all absolutely position around, rotating freely. 我正在使用一堆元素来构图背景图像,它们都绝对定位,自由旋转。
Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. 问题是,我想只转换那些对象的旋转,而不是顶部或左边的属性。 And apparently
transition: transform 30s;
显然是
transition: transform 30s;
isn't allowed. 是不允许的。 I had the brilliant idea of doing
我有很棒的想法
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
But that also doesn't work. 但这也行不通。 How can I solve this?
我怎么解决这个问题?
Transform is a vendor prefix Transform是供应商前缀
Instead of 代替
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
do 做
-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition: -moz-transform $amount-of-time ease-out;
-o-transition: -o-transform $amount-of-time ease-out;
-ms-transition: -ms-transform $amount-of-time ease-out;
transition: transform $amount-of-time ease-out;
To animate only the rotate property, I found this works in at least Chrome: 要仅为旋转属性设置动画,我发现这至少可以在Chrome中使用:
transition: transform 2.0s;
You can set different animation times for different properties inside the one transition property: 您可以为一个转换属性中的不同属性设置不同的动画时间:
transition: transform 2.0s, color 5.0s, font-size 1.0s;
The trick with the rotate
property specifically is that you have use the transform
property instead. 具有
rotate
属性的技巧特别是你使用了transform
属性。 Intuitively, this should work but does NOT work: 直觉上,这应该工作,但不起作用:
transition: rotate 2.0s; /* DOES NOT WORK */
Instead you have to use transform
in place of rotate
: 相反,你必须使用
transform
代替rotate
:
transition: transform 2.0s;
This is probably because rotate: 90deg
is shorthand for transform: rotate(90deg)
这可能是因为
rotate: 90deg
是transform: rotate(90deg)
简写transform: rotate(90deg)
transition
is now supported in the latest versions of all major browsers. 现在,所有主流浏览器的最新版本都支持
transition
。 I assume if you want more compatibility with older browsers, you might do something like: 我假设如果您想要与旧浏览器更兼容,您可能会执行以下操作:
-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.