You are here

Css animatie bij gebruikers aktie

Submitted by egbert on Wed, 30/03/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: