<input class = "spin" type="image" src="(IMAGE URL)" width="42" height="42" alt="a" title"Transform 360 deg. image!">
<style>
.spin:hover {
height: 60px;
width: 60px;
transition: .5s;
transform: rotate(360deg);
}
</style>
<!-- You can remove the height and width elements in the CSS style tag if you wish. -->#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}#fadeout{
opacity: 0;
transition: opacity 2s linear;
}
#fadein{
opacity: 1;
transition: opacity 2s linear;
} -webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;.selector {
transition: transform 1s;
}details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; transform: translateX(-10px)}
100% {opacity: 1; transform: translateX(0)}
}