Css scale div from 0.1 to 1?

Question

I know how to scale from 1 to 2:

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

But I need from 0.1 to 1. Is there any way to do it?

Answer 1

You have two options, using animation or transition, both will work as anticipated as long as you specify the starting values. animation is typically the preferred option when you want more control over the intermediate keyframes, or the immediate application of an 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);
}