我知道如何从1扩展到2:
transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);
但我需要从0.1到1.有没有办法做到这一点?
答案 0 :(得分:4)
在将元素缩放为1之前,您需要在元素上指定transform: scale(0.1);
(不要忘记供应商前缀)。
请参阅以下示例:
<强> FIDDLE 强>
CSS:
div{
width:500px;
height:500px;
background:gold;
transition: all 1s ease-in-out;
-ms-transform: rotate(0deg) scale(0.1);
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover{
-ms-transform: rotate(360deg) scale(1);
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
答案 1 :(得分:4)
您有两个选项,使用animation
或transition
,只要您指定起始值,两者都会按预期工作。当您想要更多地控制中间关键帧或立即应用动画时,animation
通常是首选选项。
HTML
<div></div>
animation
div {
background:red;
height:100px;
width:100px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-animation: transformer 4s ease-in 0s 1;
animation: transformer 4s ease-in 0s 1;
}
@-webkit-keyframes transformer {
from {
-webkit-transform: rotate(0deg) scale(0.1);
}
to {
-webkit-transform: rotate(360deg) scale(2);
}
}
@keyframes transformer {
from {
transform: rotate(0deg) scale(0.1);
}
to {
transform: rotate(360deg) scale(2);
}
}
transition
div {
width:100px;
height:100px;
background:red;
transition: all 1s ease-in;
-webkit-transform: rotate(0deg) scale(0.1);
transform: rotate(0deg) scale(0.1);
}
div:hover {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}