Zoom-in Zoom-out img automatiquement en utilisant css seulement

Question

J'ai une démo qui fonctionne. Il suffit de survoler l'image et il y a l'effet que je veux avoir.

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

Comme vous pouvez le voir dans le fichier css, je n'utilise pas de css animation .

En utilisant simplement les CSS transform Je veux que mon img obtienne le même effet sans le survoler. Cela devrait se produire automatiquement.

Alors comment faire un zoom avant et un zoom arrière automatiquement (sans animation si possible) ?

Le code va ici :

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

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

Answer 1

C'est très simple. vous pouvez voir la DEMO sur ce lien sur jsfiddle.net

<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

Utiliser l'animation

.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);

  }

}

Answer 3

Le code css ci-dessous vous aidera à obtenir un effet de zoom arrière au survol d'une image particulière. Essayez ce code, il vous sera très utile

figure {
 width: 300px;
 height: 200px;
 margin: 0;
 padding: 0;
 background: #fff;
 overflow: hidden;
}
figure:hover+span {
 bottom: -36px;
 opacity: 1;
}

.hover04 figure img {
 width: 400px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover04 figure:hover img {
 width: 300px;
}

Référez-vous au code html ici.

<div class="hover04 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>

Consultez le Démonstration ici