Jump to content

Multiple CSS transitions effects.


Recommended Posts

Hi there!!I've noticed that when I'm trying to combine two CSS transitions effects, only the first one is executed and the second one is left behind. Can someone here explain me why does this occur and how to work around it?Here's a code snippet that combine two CSS transitions for your investigation:

<html><head><title></title><script type="text/javascript">try{function start(){myDiv = document.getElementById("myDiv");myDiv.onclick = function(){myDiv.style.width = "160px"; myDiv.style.height = "160px";}}//end start().}//end try statement.catch(err){alert("there's an error in this page. \n the error message is:\n" + err.message + "\n the error name is: \n" + err.name + "\n and the error details are:\n" + err.constructor + "\n and the error stack is: \n" + err.stack);}//end catch statement.</script><style type="text/CSS">div#myDiv {background-color:blue; color:yellow; -webkit-transition:height 1s; -webkit-transition:width 1s;}</style></head><body onload="start()"><div id="myDiv">hhhhh</div></body></html>

Thanks in advance!!Atar.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...