Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS3 Easing Transition help

    looking to utilize css3 transitions to get the mouseover and mouseoff easing to work. not sure if this is doable or not.

    i uploaded the code here: http://dynodealz.com/test.html

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    ?
    What is petroleum based fuels? Trebek.
    I'll take economics for $500.

    Anyways not sure if you are asking a question or what here

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Transitions go on the :hover pseudoclass.

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i tried moving that transition to div:hover and it still didn't work.

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    should i take it that this is not doable with just css?

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    You can transition certain background properties, but not just "background" i think.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    really? that's a bummer. so there is no way to deal with this with css3 then?

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    if i change the code to this it sort of works but it seems a bit hacky and the hover gradient doesn't really work...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8" />
    	<title>Untitled</title>
    	<style type="text/css">
    	div.test {
    	    width: 200px; height: 200px;
    	    background: -moz-linear-gradient(top, rgba(0,141,210,0) 0%, rgba(0,98,167,0.25) 75%, rgba(0,84,153,0.25) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,141,210,0)), color-stop(75%,rgba(0,98,167,0.25)), color-stop(100%,rgba(0,84,153,0.25))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00008dd2', endColorstr='#40005499',GradientType=0 ); /* IE6-9 */
            background: linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* W3C */
    	}
    	div.sss {
    	    width: 200px; height: 200px;
    	    
             -webkit-transition: background-color 0.25s ease;
               -moz-transition: background-color 0.25s ease;
                 -o-transition: background-color 0.25s ease;
                    transition: background-color 0.25s ease;
    	}
    	div.sss:hover {
            background-color: rgb(201,222,150); /* Old browsers */
            background-color: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(186,192,0,1) 100%); /* FF3.6+ */
            background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(100%,rgba(186,192,0,1))); /* Chrome,Safari4+ */
            background-color: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* Chrome10+,Safari5.1+ */
            background-color: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* Opera11.10+ */
            background-color: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#bac000',GradientType=0 ); /* IE6-9 */
            background-color: linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* W3C */
    	}
    	</style>
    </head>
    <body>
    <div class="test"><div class="sss"><a href="#">Test</a></div></div>
    </body>
    </html>


  •  

    Posting Permissions

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