Re: [css-d] @keyframe:hover - Transitions
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/
[css-d] keyframe:hover
On Jan 11, 2015, at 5:25 PM, Crest Christopher crestchristop...@gmail.com wrote: 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 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/
Re: [css-d] keyframe:hover
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 t...@sperling.com wrote: On Jan 11, 2015, at 5:25 PM, Crest Christopher crestchristop...@gmail.com wrote: 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 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/
Re: [css-d] @keyframe:hover - Transitions
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/
[css-d] @keyframe:hover
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/
Re: [css-d] @keyframe:hover
Could you just change the background-position on hover? What do you envision happening that you need keyframes for? On Sun Jan 11 2015 at 5:25:16 PM Crest Christopher crestchristop...@gmail.com wrote: 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/ __ 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/