View Full Version : CSS3 Easing Transition help

09-13-2011, 12:47 PM
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

09-13-2011, 06:18 PM
What is petroleum based fuels? Trebek.
I'll take economics for $500.

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

09-13-2011, 07:31 PM
Transitions go on the :hover pseudoclass.

09-13-2011, 07:46 PM
i tried moving that transition to div:hover and it still didn't work.

09-16-2011, 05:44 PM
should i take it that this is not doable with just css?

09-17-2011, 08:45 AM
You can transition certain background properties, but not just "background" i think.

09-19-2011, 06:18 PM
really? that's a bummer. so there is no way to deal with this with css3 then?

09-21-2011, 05:37 PM
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>