Buongiorno a tutti. Testando questo codice per applicare l'effetto ken burns ad una immagine, mi sono accorta che il lato inferiore del container sale e scende seguendo il movimento dato dall'effetto. C'e un modo per fissare questo problema? Grazie mille
Codice:
<style>
.container {
max-width:600px;
width: 100%;
height: auto;
margin:40px auto;
overflow: hidden;
}
.kenburn {
width:100%;
-webkit-animation-name:pan;
animation-name:pan;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
-webkit-animation-duration:20.0s;
animation-duration:20.0s;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
@-webkit-keyframes pan {
0% {
-webkit-transform:translate(0,0) scale(1.0);
transform:translate(0,0) scale(1.0);
}
100% {
-webkit-transform:translate(-20px,-100px) scale(1.3);
transform:translate(-20px,-100px) scale(1.3);}
}
</style>
<div class="container">
<img class="kenburn" src="img.jpg">
</div>