CODEWITHSUNDEEP
htmlcss
Ceejay
Ceejay

Reputation: 7277

How to scale div smoothly in css using keyframes

I want to smoothly scale the div from ratio 0.06 to 1 using css on mouseover.but i m not able to get that effect.

Here is what i have tried

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}

div:hover {
    transform:scaleX(0.06);
    animation-name: example;
    animation-duration: 1s;
}

@keyframes example {
    25%  {transform:scaleX(0.200);}
    50%  {transform:scaleX(0.500);}
    75%  {transform:scaleX(0.700);}
    100% {transform:scaleX(1);}
}

</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>jhk</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

How can i do this?

Upvotes: 0

Views: 4276

Answers (4)

Alberto I.N.J.
Alberto I.N.J.

Reputation: 1853

No need to use @keyframes just use transition.

Here's the JsFiddle link.

HTML

<div>
    <div class="animate">
        jhk
    </div>
</div>

Note: You must add a div with a class animate to maintain the transition.

CSS

div,
.animate {
    width: 100px;
    height: 100px;
}    

.animate {
    background: red;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

div:hover > .animate {
    -webkit-transform:scaleX(0.06);
    -moz-transform:scaleX(0.06);
    -o-transform:scaleX(0.06);
    transform:scaleX(0.06);
}

In this case, using transition is a lot smoother than animation and @keyframes.

Hope it helps.

Upvotes: 1

Pepo_rasta
Pepo_rasta

Reputation: 2900

try this. You don't need transition when using key frames

<!DOCTYPE html>
<html>
<head>
<style> 
div {
     width: 100px;
     height: 100px;
     background: red;
     -webkit-transform:scaleX(0.06);
     transform:scaleX(0.06);
}

div:hover {
    animation-name: example;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes example {
    0%   {-webkit-transform:scaleX(0.06);}
    100% {-webkit-transform:scaleX(1);}
}
@keyframes example {
    0%   {transform:scaleX(0.06);}
    100% {transform:scaleX(1);}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>jhk</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

I hope you want something like this.

CSS

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all .06s ease-in-out;
-o-transition: all .06s ease-in-out;
transition: all .06s ease-in-out;
}

div:hover {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
 transform: scale(0.6);
}

@keyframes example {
25%  {transform:scaleX(0.200);}
50%  {transform:scaleX(0.500);}
75%  {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}

Fiddle

Upvotes: 0

Strelok
Strelok

Reputation: 51461

You didn't really specify how you want to transition everything so here is a basic example:

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: all ease-in 2s;
    transform:scale(0.06);
}

div:hover {
    transform:scale(1);
}

You don't need keyframes for smooth animations. Something simple like that can be accomplished with simple CSS transforms.

Working fiddle: http://jsfiddle.net/mh90y3xv/

Upvotes: 1

Related Questions