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

[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 
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 
Sunday, January 11, 2015 5:25 PM
I want to create an animated:hover with @keyframe using these three 
sprite images 
 but I'm not 
sure if this is possible with the  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/

Re: [css-d] keyframe:hover

[Barney Carroll]

Hey Tedd,

You can animate a fair few properties:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

The obvious and convenient method involves the background property:
http://jsfiddle.net/barney/p592d07u/

A lot more of a faff with images:
http://jsfiddle.net/barney/cvys8e4n/


Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com

On 13 January 2015 at 15:44, Tedd Sperling  wrote:

> On Jan 11, 2015, at 5:25 PM, Crest Christopher 
> wrote:
> >
> > I want to create an animated:hover with @keyframe using these three
> sprite images 
> but I'm not sure if this is possible with the  tag or if I have to use
> background-images, instead ?
> >
> > Christopher
>
> Christopher:
>
> This is as close as I can get to an animated hover.
>
> First part is simply a image replacement on hover.
> 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
> t...@sperling.com
>
>
>
>
>
> __
> 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/
>
__
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/

[css-d] keyframe:hover

[Tedd Sperling]

On Jan 11, 2015, at 5:25 PM, Crest Christopher  
wrote:
> 
> I want to create an animated:hover with @keyframe using these three sprite 
> images  but I'm not 
> sure if this is possible with the  tag or if I have to use 
> background-images, instead ?
> 
> Christopher

Christopher:

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

First part is simply a image replacement on hover.
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
t...@sperling.com





__
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/