U bent hier

Css animatie bij gebruikers aktie

Door egbert op wo, 03/30/2016 - 06:42

Een css animatie waarbij gestopt wordt als de muis het object verlaat, check it out!!

Panorama weergave

Ga met je muisaanwijzer over de afbeelding, of "touch" op een tablet.

De css code

@keyframes panoramic  {
to { background-position: 100% 0; }
}
@-webkit-keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 300px;
height: 300px;
background: url("Boy_and_Dog_on_the_Beach_by_speedonl.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
-webkit-animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus{
animation-play-state: running;
-webkit-animation-play-state: running;
}

De html code

Omdat er een achtergrondafbeelding wordt gebruikt moet je hiervoor de in de css genoemde div aanmaken

<div class="panoramic">

</div>


Tags: