“悬停”动画在其他动画之后不起作用

Question

我的 CSS 动画有问题。 我有一个在页面加载时开始的动画。将图像移动到一个位置并返回。 问题是我有“悬停”和“活动”的其他动画，并且在第一个动画之后它们不起作用。我单独测试了它们，它们没有问题。 这是我的 CSS 部分：

#ogaleria1{
    animation: animation1 linear 3s;
    animation-iteration-count: 2;
    transform-origin: 50%, 20% 50%, 20%;
    animation-direction: alternate;
}

@keyframes animation1{
    0%, 20% {
        transform:  translate(0px,0px)  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
    }
    80%, 100% {
        transform:  translate(1300px,700px)  rotate(-157deg) scaleX(0.80) scaleY(0.80) ;
    }
}

img:hover {
    animation-name: hover;
    transform-origin: center;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes hover {
    0% {transform: rotate(5deg) scale(1)}
    50% {transform: rotate(-5deg) scale(1.1)}
    100% {transform: rotate(5deg) scale(1)}
}

对象是图像。

感谢您的帮助。