1 reply [Last post]
pepijnschnitzeler
pepijnschnitzeler's picture
Offline
newbie
Last seen: 6 years 48 weeks ago
Timezone: GMT+2
Joined: 2013-04-22
Posts: 1
Points: 2

Hello,

I want to make a transition of a pop-up div using the css3 transition feature. However I can't seem to figure out how to change the direction of the transition. I used this example to experiment with it but I cannot let the block expand from the right to the left.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
 
div:hover
{
width:300px;
}
</style>
</head>
<body>
 
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
<div></div>
 
<p>Hover over the div element above, to see the transition effect.</p>
 
</body>
</html>

Can you guys help me?

Thanks in advance,

Pepijn

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 11 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As you haven't actually set

As you haven't actually set any properties other than 'width' I guess the transition defaults to whatever the default screen layout is i.e ltr. You can set transitions for most of the properties available and grouped together in a shorthand style statement. I think you need to play around with properties such as offsets e.g 'right' you may even need a combination of a few properties to get the effect.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me