2 Replies - 408 Views - Last Post: 03 October 2012 - 04:05 PM

#1 SBreland  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-March 11

CSS Transition Question.

Posted 03 October 2012 - 03:46 PM

I am trying to put a smooth zoom in zoom out effect on stanzas of a poem I am building a page for. I have got the effect to zoom in like I want it on a mouse hover, but the transition is just snapping back to regular size with no transition effect when I move my mouse away.
#stanza:hover
	{
	-webkit-transition-property: all;
	-webkit-transform: scale(2,2); 
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-duration: 2.5s; 
	
	-moz-transition-property: all;
	-moz-transform: scale(2,2); 
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-duration: 2.5s;
	}



I have looked at the code at w3schools, but I don't seem to be able to get the same effect myself.

I am not sure how much of my style sheet is needed, if more is needed please let me know.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Transition Question.

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: CSS Transition Question.

Posted 03 October 2012 - 03:58 PM

You're only applying the transition on :hover, so that's only when the transition will be applied!

You should instead do something like this:
#stanza
{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-duration: 2.5s;
    -moz-transition-property: -moz-transform;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 2.5s;
    -o-transition-property: -o-transform;
    -o-transition-timing-function: ease-in-out;
    -o-transition-duration: 2.5s;
    -ms-transition-property: -ms-transform;
    -ms-transition-timing-function: ease-in-out;
    -ms-transition-duration: 2.5s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 2.5s;
}

#stanza:hover
{
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -o-transform: scale(2,2);
    -ms-transform: scale(2,2);
    transform: scale(2,2);
}

Was This Post Helpful? 1
  • +
  • -

#3 SBreland  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-March 11

Re: CSS Transition Question.

Posted 03 October 2012 - 04:05 PM

Thank you, that did exactly what I wanted.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1