css – 过渡缓和,从右到左,如何?

缓和通常从左向右移动,现在我想从右向左改变它
如何在CSS中设置它?

例如:

transition:         background-position 150ms ease-out;
-moz-transition:    background-position 150ms ease-out;
-webkit-transition: background-position 150ms ease-out;
-o-transition:      background-position 150ms ease-out;

解决方法

transition属性没有认方向.缓和只是 transition timing function

Spec

The transition-timing-function property describes how the
intermediate values used during a transition will be calculated. It
allows for a transition to change speed over its duration. These
effects are commonly called easing functions. In either case,a
mathematical function that provides a smooth curve is used.

背景位置转换的方向取决于第一个和最后一个值.

例如:

.Box {
    /* other styles here... */
    background-image: url(http://lorempixel.com/500/300);
    transition: background-position 150ms ease-out;
}

/* Move the background image from right to left */
.Box.rtl { background-position: 0 center; }
.Box.rtl:hover { background-position: 100% center; }

/* Move the background image from left to right */
.Box.ltr { background-position: 100% center; }
.Box.ltr:hover { background-position: 0 center; }

WORKING DEMO.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效