SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with css3 transition

    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?


  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course it doesn't work in Chrome, at least not without -webkit-transition

    It will not work in any IE browser, however.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's it...

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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>

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked great

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

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Worked great

    Is there a way to have the border transparent instead of #fff? Tried a couple of things. Unsuccesful.
    did you try rgba() ?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Worked great

    Is there a way to have the border transparent instead of #fff? Tried a couple of things. Unsuccesful.
    border:1px solid transparent;

  8. #8
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #10
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends about Chrome. But ussually when I hover it, it disappears and when its done with transition it shows up again.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #12
    SitePoint Zealot godfather999's Avatar
    Join Date
    Sep 2011
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •