如何在css中使用關鍵幀順利地縮放div

我想在比例0.06 to 1上順利縮放div，在mouseover上使用css。但我無法獲得該效果。如何在css中使用關鍵幀順利地縮放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>

我怎樣才能做到這一點？

來源

2015-06-25 Mithun Raikar

試試這個。使用關鍵幀

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

來源

2015-06-25 06:59:39

我希望你想是這樣的，當你不需要過渡。

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

來源

2015-06-25 07:01:52

你真的不指定要如何使這裏的一切轉變是一個基本的例子：

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

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

你不需要平滑動畫的關鍵幀。像這樣簡單的事情可以用簡單的CSS transform s完成。

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

來源

2015-06-25 07:03:45 Strelok

無需使用@keyframes只使用transition。

這是JsFiddle link。

HTML

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

注：您必須以類別animate添加div保持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更順暢了很多。

希望它有幫助。

來源

2015-06-25 07:10:09

如何在css中使用關鍵幀順利地縮放div

回答

相關問題