problem with css3 transition

**rhgiant** · Aug 19, 2011 10:55

Hello,

Code:

li {
	display: inline;
	padding: 5px;
	}
li:hover {
	border: 1px solid #f00;
	padding: 10px;
	webkit-transition: padding 0.4s ease 0s;
	-moz-transition: padding 0.4s ease 0s;
	-o-transition: padding 0.4s ease 0s;
	transition: padding 0.4s ease 0s;
	}

This code doesn't work in browsers (e.g. Chrome) where this code works:

Code:

	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	transition: opacity 1s linear;

I'm assuming that transition is supported. I'm deducing that there is something wrong with the first bit of code. What, is what I can't find.

Do you?

**lpcstr** · Aug 19, 2011 11:52

Of course it doesn't work in Chrome, at least not without -webkit-transition

It will not work in any IE browser, however.

**rhgiant** · Aug 19, 2011 12:18

Oh that's it...

Still doesn't work in Opera, though...

**Paul O'B** · Aug 19, 2011 13:29

Try something like this for opera:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
li {
	display: inline;
	padding: 5px;
	-webkit-transition: padding 0.4s ease 0s;
	-moz-transition: padding 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: padding 0.4s ease 0s;
	border:1px solid #fff;
}
li:hover {
	border: 1px solid #f00;
	padding: 10px;
}

</style>
</head>

<body>
<ul>
<li>test</li>
</ul>
</body>
</html>

**rhgiant** · Aug 19, 2011 16:16

Worked great

Is there a way to have the border transparent instead of #fff? Tried a couple of things. Unsuccesful.

**lpcstr** · Aug 19, 2011 19:51

Originally Posted by rhgiant

Worked great

Is there a way to have the border transparent instead of #fff? Tried a couple of things. Unsuccesful.

did you try rgba() ?

**Paul O'B** · Aug 20, 2011 03:48

Originally Posted by rhgiant

Worked great

Is there a way to have the border transparent instead of #fff? Tried a couple of things. Unsuccesful.

border:1px solid transparent;

**godfather999** · Dec 28, 2011 11:45

I dont want to open a new topic, so I'll post it here because it similar problem. I did this transition before and it worked. Now when I try to run it it doesnt work. Code is the same and also Chrome.

When its hovered it disappears and when its done transforming it shows up. I did a google search and found out its problem with browser. Then I tried in IE and Firefox and Safari and it worked. But I want to know why it has worked first time. Why is that. My Chrome version is 16.0.912.63. Can you try this code to see does it work for you.

Code:

body{
   text-align:center;
}
#box{
   display:block;
   width:500px;
   margin:150px auto;
   padding:15px;
   text-align:center;
   border:7px solid blue;
   background:yellow;
   -webkit-transition: -webkit-transform 10s;
}
#box:hover{
   -webkit-transform:rotate(45deg);
}

Code:

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Bucky's Website</title>
   <link rel="stylesheet" href="main.css" />
</head>
<body>

   <div id="box">
      <p id="text">omgwtfbbq?</p>
   </div>
   
</body>
</html>

31362188.png

**Paul O'B** · Dec 28, 2011 13:51

The above code works for me in Safari and Chrome (same version as you) but it doesn't look like your attachment which seems to be skewed rather than rotated as per the code above.

**godfather999** · Dec 29, 2011 00:44

It depends about Chrome. But ussually when I hover it, it disappears and when its done with transition it shows up again.

**Paul O'B** · Dec 29, 2011 05:19

It's working fine for me on Chrome PC so its hard to offer any constructive help. It may just be your system or your browser/extension etc that it doesn't like. Are you trying with exactly the same code you posted above? Are you on a mac or PC?

**godfather999** · Dec 29, 2011 05:35

Im on PC. The same code. I also made one rollover button but also not working. Maybe its something about my system because it has worked before.

User Tag List

Thread: problem with css3 transition

Thread Tools

Display

problem with css3 transition

Bookmarks

Bookmarks

Posting Permissions