Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

Cool Transitions for social Icons..

Hi everyone,

Jazzed up my social icons with some CSS3 Transitions thought id share the code in case anyone wants to give it a go !!

html
<div class="icons">
  <div><img src="img/icon/facebook-m.png" class="icon" id="facbook-home"></div>
  <div><img src="img/icon/google-m.png" class="icon" id="google-plus"></div>
  <div><img src="img/icon/twitter-m.png" class="icon" id="twitter"></div>
</div>

Heres the CSS!

css

.icons {
  display: flex;
  margin-left: auto;
  padding: 2px;

}

.icon {
  padding: 1px;
  margin-right: 10px;
  width: 45px;
  height: 45px;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;
}

.icon:hover {
  -webkit-transform:rotate(2880deg);
  -moz-transform:rotate(2880deg);
  -o-transform:rotate(2880deg); 
  width: 60px;
  height: 60px;
}

I know its relatively simple stuff for those with experience but I fancied a change from the normal Grey to Colour hover state ......

Also FlexBox makes positions so easy!

Let me know what you think or if there is any changes you would make!

Craig

James Barnett
James Barnett
39,199 Points

Upload your code and link to your icons on codepen so we can see a working demo

Janis Celms
Janis Celms
44,170 Points

In my opinion 4 seconds is way too long for icon animation - i would go with 1 second, 360deg and same size increase or just drop the rotation at all and throw in color change. But that's just my opinion :)

Craig Watson
Craig Watson
27,930 Points

Hi James, I'm still a little new to webdesign but ive now signed up to codepen and will soon add it on there to have a look at and let you know!

Hi Janis, I understand were you are coming from it is a valid point the reason for the four seconds and countless degrees is that upon trying 360deg. and 1s on my first go it seemed to create an illusion of slow loading and it wasn't clear on the desired effect. I increased both so that should the user want to follow the link it will appear in constant rotation.

I am however trying to think of enlarging a lot and fading the icon once :active to hopefully give the appearance of fading into the chosen destination, I'm not managing to to enlarge over a given transformation-duration ? Any ideas or help ?

Thanks!