在动画后应用悬停效果

【问题标题】：Applying hover effect after an animation在动画后应用悬停效果
【发布时间】：2013-04-14 03:33:35
【问题描述】：

我有一个动画应用到

`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;}`

所以在此之后，我希望能够将鼠标悬停在这个元素（这是一个图像）上，以便改变它的比例或制作另一个图像，但是无论我做什么它都不起作用。所以让我们说 une:hover{-webkit-transform:scale(1;1)} 不起作用任何人有任何想法/解决方案？

【问题讨论】：

标签： css animation hover

【解决方案1】：

我必须为我的网站做类似的事情，看看-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;

【讨论】：