應用動畫後懸停效果

我已經申請到應用動畫後懸停效果

`une 
{margin-top: 245px;margin-left: 545px; -webkit-animation:move ease 1 forwards 15s 3s; -moz-animation:move ease 1 forwards 15s 3s ;animation:move ease 1 forwards 15s 3s ; 


-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}`

這樣的動畫在此之後我希望能夠以這個元素（這是一個圖像）上懸停要麼改變它的規模或使另一個圖像Apper，但是不管我做什麼都行不通。讓我們說 une：hover {-webkit-transform：scale（1; 1）}不工作任何人的任何想法/解決方案？

來源

2013-04-21 user2303363

我不得不做類似的東西爲我的網站，檢查它OUT- http://jsfiddle.net/apaul34208/v7k7f/10/

這裏有一個更簡單的版本 - http://jsfiddle.net/apaul34208/MzSkJ/1/

.une { 
    position:absolute; /* use position rather than margin */ 
    top:--px; 
    left:--px; 
    -webkit-animation:lightSpeedIn 1s; 
    -moz-animation:lightSpeedIn 1s; 
    animation:lightSpeedIn 1s; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 
.une:hover { 
    transform-origin:top; /* keeps it on the viewable screen */ 
    transform:scale(2.5); 
}

我覺得transform-origin和position可能已經缺失的部分，但我需要看到動畫確定。

動畫語法看起來有點偏離。 Try using the formal syntax -

animation: name duration easing delay iteration-count direction fill-mode;

來源

2013-04-21 00:49:04 apaul

應用動畫後懸停效果

回答

相關問題