使用步骤在png序列上进行CSS转换 [英] CSS transition on png sequence using steps

问题描述

我尝试使用PNG序列制作动画，当悬停状态结束时，该动画具有悬停状态的转换。

使用带有steps计时功能的css转换，如下：

  transition：background .5s steps结束）; 
  

看到一个实例的小提示（我使用了一个随机的PNG精灵，我Googled，而不是我实际使用的）

http：// jsfiddle.net/MLWL5/

基本上这是工作正常，当你将鼠标悬停在元素上。当您快速悬停在元素上时，转换似乎会在背景图像（如果在上一个转换中途）时触发，然后步骤数不匹配，会产生不良效果。

我可以使用javascript来触发转换，但是有没有人知道是否有一个CSS解决方案？

解决方案

这不是一个完美的解决方案，但你可以用某种方式用动画处理悬停更改。

CSS

  div {width：50px; 
 height：72px; background：url（http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png）left top; 
 transition：background 1.5s steps（9，end）; 
 background-position：0px top; 
 -webkit-animation：none; 
} 
 
 div：hover {
 background-position：-450px top; 
 -webkit-animation：bkg 1.5s steps（9）; 
 transition：none; 
 
} 
 
 @ -webkit-keyframes bkg {
 0％{background-position：0px top;} 
 100％{background-position： -450px top;} 
} 
  

CSS演示

还有一个使用jQuery的解决方案。这一个动画从在悬浮时刻的点开始倒回。

 <$> 
 c $ c> $（div）.hover（
 function（）{
 var elem = $（this）; 
 var cur = parseInt（elem.css -x））; 
 var steps =（450 + cur）/ 50; 
 var time = steps * 0.1; 
 var trans =background+ time + + steps +，end）; 
 elem.css（transition，trans）; 
 elem.css（background-position，-450px 0px）; 
} ，
 function（）{
 var elem = $（this）; 
 var cur = parseInt（elem.css（background-position-x））; 
 var steps =  -  cur / 50; 
 var time = steps * 0.1; 
 var trans =background+ time +s steps（+ steps +，end）; 
 elem。 css（transition，trans）; 
 elem.css（background-position，0px 0px）; 
} 
）; 
  

jQuery演示

jQuery代码可以简化一点，使用函数避免重复的代码，但我已经设置为清楚posible

I'm trying to make an animation using a PNG sequence, which has a transition on hover, and animates back when the hover state ends.

For this I'm using a css transition with a "steps" timing function, like so:

transition:background .5s steps(9, end);

See the fiddle for a live example (I've used a random PNG sprite that I Googled, it's not the one I'm actually using)

http://jsfiddle.net/MLWL5/

Basically this is working fine, when you hover over the element slowly. When you quickly hover on and off the element, the transition seems to trigger when the background image if halfway through the previous transition, and then the number of steps don't match which will get an undesired effect.

I could use javascript to trigger the transition, but does anyone know if there's a CSS only solution for this?

解决方案

It's not a perfect solution, but you can have it somehow working handling the hover change with an animation instead.

It will work ok if you un-hover after the animation has finished, but it won't animate at all if you un-hover quickly

CSS

div { width:50px; 
    height:72px;             background:url(http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png) left top;
    transition:background 1.5s steps(9, end);
    background-position: 0px top; 
    -webkit-animation: none;
}

div:hover { 
    background-position:-450px top; 
    -webkit-animation: bkg 1.5s steps(9);
    transition: none;

} 

@-webkit-keyframes bkg {
    0% {background-position: 0px top;}
  100% {background-position: -450px top;}
}

CSS demo

And, a solution using jQuery. This one rewinds the animation from the point where it was at the un-hover moment. It also recalculates the time, so that it doesn't slow down

jQuery

$( "div" ).hover(
    function() {
        var elem = $(this);
        var cur = parseInt(elem.css("background-position-x"));
        var steps = (450 + cur) / 50;
        var time = steps * 0.1;
        var trans = "background " + time + "s steps(" + steps + ", end)";
        elem.css("transition", trans);
        elem.css("background-position", "-450px 0px");
    }, 
    function() {
        var elem = $(this);
        var cur = parseInt(elem.css("background-position-x"));
        var steps = - cur / 50;
        var time = steps * 0.1;
        var trans = "background " + time + "s steps(" + steps + ", end)";
        elem.css("transition", trans);
        elem.css("background-position", "0px 0px");
  }
);

jQuery demo

The jQuery code can be streamlined a little, using functions to avoid duplicate code, but I have set it to be as clear as posible

这篇关于使用步骤在png序列上进行CSS转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！