仅使用 css 自动放大缩小 img

Question

我有一个工作演示。只需将 img 悬停，就有我想要的效果。

http://jsfiddle.net/jxgjhzer/1/

正如您在 css 文件中看到的那样，我不使用任何 css animation 。

只需使用 CSS transform ，我希望我的 img 无需悬停即可达到相同的效果。它应该自动发生。

那么如何自动放大和缩小（如果可能的话没有动画）？

代码在这里：

 .galleryImg{
    height:150px;
    width:100%;
    transform-origin: 50% 50%;
    transition: transform 30s linear;
 }

 .galleryImg:hover{
    transform: scale(2) rotate(0.1deg);
 }

原文由 micronyks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

那很简单。你可以在 jsfiddle.net 上的 这个链接 上看到 DEMO

 <div class="cardcontainer">
  <img class="galleryImg" src="https://www.google.com/logos/doodles/2014/2014-winter-olympics-5710368030588928-hp.jpg">
</div>

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

.cardcontainer img {
    animation: zoominoutsinglefeatured 1s infinite ;
}

原文由 DolDurma 发布，翻译遵循 CC BY-SA 3.0 许可协议