Problem with css3 transition

HTML & CSS
1

Hello,


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:



	-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?

:slight_smile:

2

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

It will not work in any IE browser, however.

3

Oh that’s it…

Still doesn’t work in Opera, though… :slight_smile:

4

Try something like this for opera:


<!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>
5

Worked great :slight_smile:

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

6

did you try rgba() ?

7

border:1px solid transparent; :slight_smile:

8

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.

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);
}

<!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>
9

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.

10

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

11

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?

12

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.