仅使用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);
 }

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

Answer 2

使用动画

.galleryImg{
    height:150px;
    width:100%;
     animation:move 3s infinite ease-in-out;
 }

@keyframes move{
0%{
 transform: scale(1) rotate(0deg);
}
  100%{
   transform: scale(2) rotate(0.1deg);

  }

}