我知道如何从1扩展到2：
@H_403_2@transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);
但我需要从0.1到1.有没有办法做到这一点？
解决方法
您有两个选项,使用动画或转换,只要您指定起始值,两个选项都将按预期工作.当您想要更多地控制中间关键帧或立即应用动画时,动画通常是首选选项.
HTML
@H_403_2@<div></div> @H_403_2@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); } } @H_403_2@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); }