2 Replies - 1431 Views - Last Post: 11 December 2012 - 11:23 PM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

Grow and spin with css3

Posted 11 December 2012 - 01:07 PM

I'm trying to have images spin and grow when hovered but they're only spinning.
Css:
a img{
	transition: width 2s, height 2s;
	-webkit-transition: width 2s, height 2s;
	-moz-transition: width 2s, height 2s;
	-o-transition: width 2s, height 2s;
}

#mac {
	width: 256;
	height: 300;
}

#windows {
	width: 256;
	height: 230;
}

#linux {
	width: 256;
	height: 300;
}

a img:hover {
	animation-name: spin;
	-webkit-animation-name: spin;
	-moz-animation-name: spin;
	-o-animation-name: spin;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	/*animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;*/
	/*animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;*/
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@-o-keyframes spin {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}


And html:
<a href="usingiemac.html">
	<img id="mac" src="Images/applelogo.png" width="128" height="150" /></a>
<a href="usingiewindows.html">
	<img id="windows" src="Images/windowslogo.png" width="128" height="115" /></a>
<a href="usingielinux.html">
	<img id="linux" src="Images/linuxlogo.png" width="128" height="150" /></a>



Is This A Good Question/Topic? 0
  • +

Replies To: Grow and spin with css3

#2 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Grow and spin with css3

Posted 11 December 2012 - 10:58 PM

are you looking for something like this...

http://jsfiddle.net/amit_7soni/LM9he/
Was This Post Helpful? 0
  • +
  • -

#3 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Grow and spin with css3

Posted 11 December 2012 - 11:23 PM

View Postamit.soni, on 11 December 2012 - 10:58 PM, said:

are you looking for something like this...

http://jsfiddle.net/amit_7soni/LM9he/



using image...

http://jsfiddle.net/amit_7soni/v8wG3/
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1