Question

我想在mouseover上使用css从比例0.06 to 1平滑地缩放div。但我无法达到此效果。

这是我试过的

<!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>

我该怎么做？

Answer 1

试试这个。使用关键帧时，您不需要转换

＆＃13;

<!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>

＆＃13;

Answer 2

你没有真正指定你想要如何转换所有内容所以这是一个基本的例子：

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

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

您不需要关键帧来获得流畅的动画效果。像这样简单的东西可以用简单的CSS transform来完成。

工作小提琴：http://jsfiddle.net/mh90y3xv/

Answer 3

无需使用@keyframes只需使用transition。

这里是JsFiddle link 。

<强> HTML

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

注意：您必须添加div类animate才能维护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);
}

在这种情况下，使用transition比animation和@keyframes更顺畅。

希望它有所帮助。

Answer 4

我希望你想要这样的东西。

<强> 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

如何使用关键帧在css中平滑地缩放div

4 个答案: