Egbert Kappert webdesign muziek en fotografie Egbert Kappert


CSS animatie

Gepost op: Door: Egbert Kappert

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

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>
comments powered by Disqus