Css scale div从0.1到1?

时间:2014-05-06 15:31:52

标签: css css3

我知道如何从1扩展到2:

transition: all 1s ease-in-out;
transform: rotate(360deg) scale(2);

但我需要从0.1到1.有没有办法做到这一点?

2 个答案:

答案 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)

您有两个选项,使用animationtransition,只要您指定起始值,两者都会按预期工作。当您想要更多地控制中间关键帧或立即应用动画时,animation通常是首选选项。

HTML

<div></div>

Using 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);
    }
}

Using 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);
}