如何通過webkit動畫縮放圖像隨着時間的推移通過webkit

我有一個簡單的圖庫集合，我想在mouseover上順利地從小到大轉換。我目前正在通過揭示圖像的實際大小來解決鼠標懸停時的問題，但是如果不是這樣，則會將其強制爲一定大小，並通過display：none隱藏實際大小。如何通過webkit動畫縮放圖像隨着時間的推移通過webkit

我想包括一些webkit轉換在1秒內完成以改善轉換。我知道webkit是要在兩個狀態之間轉換一個元素，但無論如何，我可以做到這一點。

我也想避免使用JavaScript。

.reveal a .preview 
{ 
    display: none; 
} 

.reveal a:hover .preview 
{ 
    display: block; 
    position: absolute; 
    z-index: 1; 
} 

.reveal img 
{ 
    background: #fff 
    padding: 2px; 
    vertical-align: top; 
    width: 100px; 
    height: 75px; 
} 

.reveal li 
{ 
    background: #eee; 
    display: inline; 
    float: left; 
    margin: 3px; 
    padding: 5px; 
    position: relative; 
} 

.reveal .preview 
{ 
    border-color: #000; 
    width: auto; 
    height: auto; 
}

來源

2013-02-24 Adam Brown

沒有HTML（即的jsfiddle）這是我很難插入你的代碼中的解決方案..但這裏是懸停一個通用的解決方案http://jsfiddle.net/9QVae/2/

img 
{ 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 1s, height 1s; 
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */ 
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */ 
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */ 
}

：

img:hover 
{ 
    width:200px; 
    height:200px; 
}

所以trick是指定您要添加效果的css屬性（即寬度）然後指定事件的持續時間，即transition:width 1s;那麼你指定的最終尺寸:hover選擇下

注：transition不不工作在IE

來源

2013-02-24 14:03:45 abbood

嘿感謝，這是可愛的。儘管這與我想要的有些不同。一切都需要轉移，使其工作，我鬆散頂部填充。此外，我的圖片都是不同的大小，使用'自動'不能解決這個問題。 – 2013-02-24 14:34:51

我想盡可能多..如果你給我一個jsfiddle我很確定我可以告訴你到底該怎麼辦 – abbood 2013-02-24 14:36:31

這基本上是我目前所擁有的http://jsfiddle.net/YXDLc/ – 2013-02-24 14:42:48

如何通過webkit動畫縮放圖像隨着時間的推移通過webkit

回答

相關問題