Web Analytics Made Easy -
StatCounter CSS3 Easing Transition help - CodingForum


No announcement yet.

CSS3 Easing Transition help

  • Filter
  • Time
  • Show
Clear All
new 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
    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
      Transitions go on the :hover pseudoclass.
      Blog | Twitter
      Useful links: W3C HTML Validator | W3C CSS Validator | HTML 5 Guide
      CF: HTML & CSS Resources/Tutorials Thread | HTML & CSS Posting Rules and Guidelines
      Remember: no link, no code, no help!


      • #4
        i tried moving that transition to div:hover and it still didn't work.


        • #5
          should i take it that this is not doable with just css?


          • #6
            You can transition certain background properties, but not just "background" i think.


            • #7
              really? that's a bummer. so there is no way to deal with this with css3 then?


              • #8
                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...

                <!DOCTYPE html>
                <html lang="en">
                	<meta charset="utf-8" />
                	<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 */
                <div class="test"><div class="sss"><a href="#">Test</a></div></div>