Re: [css-d] @keyframe:hover - Transitions

2015-01-14 Thread Tom Livingston
crestchristop...@gmail.com wrote:

 You are using an animated GIF.  I came to another realization; I thought
 about using transitions, from one image to another.

   ul.baselinks li a.prev
 {background:url('/wdp/wip/animated-hover.png');color:transparent;}
  ul.baselinks li a.prev:hover {background-position:-24px
 0;transition:background-position:1s;}
  ul.baselinks li a.prev:link {background-position:-12px 0;}
  .imgbox {margin:35px 0 0 45px;}

 The hover is not working, and I can't figure out what I've done wrong ?


See http://css-tricks.com/almanac/properties/t/transition/

Your syntax looks wrong here:
transition:background-position:1s;

Do you really want color:transparent; on ul.baselinks li a.prev?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] @keyframe:hover - Transitions

2015-01-13 Thread Crest Christopher
You are using an animated GIF.  I came to another realization; I thought 
about using transitions, from one image to another.


 ul.baselinks li a.prev 
{background:url('/wdp/wip/animated-hover.png');color:transparent;}
ul.baselinks li a.prev:hover {background-position:-24px 
0;transition:background-position:1s;}

ul.baselinks li a.prev:link {background-position:-12px 0;}
.imgbox {margin:35px 0 0 45px;}

The hover is not working, and I can't figure out what I've done wrong ?


Tedd Sperling mailto:t...@ancientstones.com
Tuesday, January 13, 2015 10:40 AM

Christopher:

This is as close as I can get to an animated hoover.

First part is simply a image replacement on hoover.
The second part is an animated GIT.

http://webbytedd.com/bb/replace-image3/

There are other examples and the code is there.

Use as you may.

Cheers,

tedd

___
tedd sperling
tedd.sperl...@gmail.com
Crest Christopher mailto:crestchristop...@gmail.com
Sunday, January 11, 2015 5:25 PM
I want to create an animated:hover with @keyframe using these three 
sprite images 
http://www.thecreativesheep.ca/wdp/wip/css_keyframe.htm but I'm not 
sure if this is possible with the img tag or if I have to use 
background-images, instead ?


Christopher



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/