TimesToCome

Geekiness and life on the third coast

HTML5 Animated Image Links




See example

I wanted to wiggle the icon links to my apps in a similar way to iOS on your device.

In your style.css you’ll need:

.main a img {
padding:4px;
border:#fff 2px solid;
}

.main a:hover img {
padding:4px;
border:#ddd 2px solid;
-webkit-animation:rotate 1s; /* Safari and Chrome */
}

@-webkit-keyframes rotate /* Safari and Chrome */
{
0% {-webkit-transform:rotate(0deg);}
33% {-webkit-transform:rotate(20deg);}
66% {-webkit-transform:rotate(-20deg);}
100% {-webkit-transform:rotate(0deg);}
}

In your myPage.php you’ll need:

<div class=”main”>
<a href=”http://timestocomemobile.com/apps/fertilizerCalculator.php”>
<img alt=”Fertilizer” src=”http://timestocomemobile.com/wp-content/uploads/2013/08/Fertilizer.png”  />
</a>
</div>