缓和通常从左向右移动,现在我想从右向左改变它
如何在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; }