在CSS狀態之間動畫？

我可以在懸停狀態之間動畫嗎？在CSS狀態之間動畫？

如：

#menu ul li a { 
    display:block; 
    margin:0px; 
    padding:0px; 
    color:#FFF; 
    text-decoration:none; 
    font-family: Arial, Helvetica, sans-serif; 
    margin-right: 5px; 
    margin-left: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 
#menu ul li a:hover { 
    color:#fff; 
    margin-bottom:5px; 
    padding-bottom:5px; 
    border-bottom: 25px solid #0488C5;

所以底部邊框會從0上升到25像素。

我不確定這是可能的CSS，或者如果我不得不使用jQuery？

來源

2012-09-25 GT22

您可以使用CSS3過渡，但他們的支持並沒有很大的時刻：

 
#menu ul li a { 
    -webkit-transition: border .5s ease-in-out; 
    -moz-transition: border .5s ease-in-out; 
    -o-transition: border .5s ease-in-out; 
    transition: border .5s ease-in-out; 
}

的語法是：elementtimeeasing

這裏有一個Fiddle

來源

2012-09-25 10:24:54 Alex

我的事情他們的支持** **是很大的。只是IE9缺乏。 – Prinzhorn

帶前綴;-)我指的是標準支持。但感謝您的信息！ – Alex

爲了更好的轉換，需要爲兩者設置邊框。 http://jsfiddle.net/2d3ew/1/從「無」動畫到其他任何東西都不被支持（這就是爲什麼你的小提琴會跳動，而且是奇怪的事情）。 – Prinzhorn

你可以做css類之間動畫使用jQuery UI

$(".newClass").switchClass("newClass", "anotherNewClass", 1000);

你也可以用它來製作動畫的CSS屬性：

$("#effect").animate({ 
    backgroundColor: "#aa0000", 
    color: "#fff", 
    width: 500 
}, 1000);

這將動畫從當前的背景顏色，顏色和寬度，到指定的人。

來源

2012-09-25 10:25:08 Asciiom

1.他沒有要求上課。 2. jQuery UI會添加200kb。 – Prinzhorn

默認情況下，您不能在jQuery中設置動畫顏色 – Mark

您可以指定懸停類並使用jQuery的方法添加它。我也直接提供了動畫屬性的替代方案。不像jQuery UI解決方案那樣支持CSS3轉換。當然，尺寸會增加，但200kb這些日子並不是什麼大不了的事情。 – Asciiom

是的，只需添加一個CSS過渡。

在#menu ul li a {

只需添加：

-webkit-transition: border .5s ease-in-out; 
-moz-transition: border .5s ease-in-out; 
-o-transition: border .5s ease-in-out; 
transition: border .5s ease-in-out;

你不通過的方式需要一個MS之一，IE10不使用前綴。

對於負載更多的信息，看看http://css3.bradshawenterprises.com/

來源

2012-09-25 10:25:59

CSS3過渡會做的工作：

#menu ul li a { 
    display:block; 
    color:#FFF; 
    text-decoration:none; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0 5px; 
    padding: 0 10px; 
    -webkit-transition: border-bottom-width 0.5s ease-in-out; 
    -moz-transition: border-bottom-width 0.5s ease-in-out; 
    -o-transition: border-bottom-width 0.5s ease-in-out; 
    transition: border-bottom-width 0.5s ease-in-out; 
} 
#menu ul li a:hover { 
    color:#fff; 
    margin-bottom:5px; 
    padding-bottom:5px; 
    border-bottom: 25px solid #0488C5; 
}

來源

2012-09-25 10:29:16 Mark

在CSS狀態之間動畫？

回答

相關問題