如何在悬停时和每 10 秒旋转一次图像？答案

【问题标题】：How do I rotate an image at hover and every 10 seconds?如何在悬停时和每 10 秒旋转一次图像？
【发布时间】：2021-03-21 04:33:28
【问题描述】：

我制作了一个 CSS，当有人悬停它时可以旋转我的图像但我也会每 10 秒旋转一次这张图片

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

.smiley-construct img:hover {
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    transform: rotate(540deg);        
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
}      


<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div>

我可以将其更改为每 10 秒旋转一次图像吗但是并保持悬停旋转？

谢谢

【问题讨论】：

标签： css animation rotation

【解决方案1】：

您可以在 javascript 中创建一个函数并进行如下操作：或者在您的页面加载时将其设为 jquery，但在不知道结构和可用资源的情况下，我无法为您做出决定。

var elemPicture = document.getElementById("PictureId");
 elemPicture.style.transition = "all 0.5s"; 
 elemPicture.style.transform = "rotate(15deg)";

【讨论】：

【解决方案2】：

您可以在 css 中创建关键帧，如下所示：

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  93% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(540deg);
  }


.smiley-construct img {
    animation: rotating 10s infinite;
    transition: 0.70s ease-in-out;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
}

【讨论】：

感谢@kien-ha-trung 的回答，这是我的第一次尝试，但将关键帧组合为每 10 秒旋转一次，悬停单独工作，但不能一起工作 ://

【解决方案3】：

更好的是，使用关键帧。能用CSS就不用加额外的JS了。

有一个很好的解释如何做到这一点here。

【讨论】：

感谢您的链接，我知道如何每 10 秒旋转一次（当我独自完成时），但不明白如何将它与悬停旋转混合。

【解决方案4】：

我们可以有两个 CSS 动画 - 一个旋转面部然后等待 10 秒的最佳时间并继续这样做，另一个在悬停时开始并只旋转一次。

我不确定您想要的效果 - 每次旋转后脸部是否会倒置？如果没有，您可能想要使用动画填充模式。

这是一个sn-p：

.smiley-construct {
    width: 64px;
    padding: 0;
}

.smiley-construct img {
    animation-name: spinwait;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.smiley-construct img:hover {
    animation-name: spin;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
@keyframes spinwait {
    0% {
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(540deg);
    }
    7.1% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

<div class="smiley-construct">
      <a href="https://quentinrenaux.com/thisishome"><img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png"></a>
</div>

【讨论】：

哦，谢谢@AHaworth，这太不可思议了，我现在明白了，你认为有没有可能在跳转结束效果的地方在两个效果结束时产生平滑效果
我相信我们可以做点什么。你想让它看起来像什么，只需一秒钟就可以倒过来，像这样？