entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions|1|https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function|blocks|key|54cre|text|没有默认值方向对于过渡调整属性。和ease-out只是一个|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|3ldl|过渡定时函数|7m196|从等级库|2u7te|The+transition-timing-function属性描述如何计算转换期间使用的中间值。它允许转换在其持续时间内改变速度。这些效果通常被称为缓和函数。在这两种情况下，都会使用提供平滑曲线的数学函数。|6t88b|方向background-position转换，取决于首先和最后值。|BOLD|eomev|例如：|2uvk5|.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%25+center;+}

/*+Move+the+background+image+from+left+to+right+*/
.box.ltr+{+background-position:+100%25+center;+}
.box.ltr:hover+{+background-position:+0+center;+}|code-block|syntax|javascript|9u0ii|工作演示..。^0|H|8|9|2|0|0|0|6|1|0|0|4|Q|0|0|Y|2|J|0|0|3|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|16|I|@$J|17|K|18|L|M]]|N|@$J|19|K|1A|C|1B]]|6|$]]|$C|O|E|P|2|G|H|1C|I|@]|N|@$J|1D|K|1E|C|1F]]|6|$]]|$C|Q|E|R|2|G|H|1G|I|@]|N|@]|6|$]]|$C|S|E|T|2|G|H|1H|I|@$J|1I|K|1J|L|M]]|N|@]|6|$]]|$C|U|E|V|2|G|H|1K|I|@$J|1L|K|1M|L|W]|$J|1N|K|1O|L|M]]|N|@]|6|$]]|$C|X|E|Y|2|G|H|1P|I|@$J|1Q|K|1R|L|W]]|N|@]|6|$]]|$C|Z|E|10|2|11|H|1S|I|@]|N|@]|6|$12|13]]|$C|14|E|15|2|G|H|1T|I|@]|N|@]|6|$]]]]

There's no default direction for <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="noreferrer">transition</a>ing the properties. And <code>ease-out</code> is just a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function" rel="noreferrer">transition timing function</a>:

From the <a href="http://dev.w3.org/csswg/css-transitions/#transition-timing-function_tag" rel="noreferrer">Spec</a>:

<blockquote>
 The <code>transition-timing-function</code> 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.
</blockquote>

The direction of <code>background-position</code> transition, depends on the first and the last values.

For instance:

<pre class="lang-css prettyprint-override"><code>.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; }
</code></pre>

<a href="http://jsfiddle.net/hashem/jxTN8/" rel="noreferrer">WORKING DEMO</a>.

entityMap|blocks|key|63r5c|text|也许你可以尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4j6u7|div+{
++++float:+right;

++++width:+100px;
++++height:+100px;
++++background:+red;
++++transition:+width+2s;
++++transition-timing-function:+linear;
++++text-align:+center;
}

div:hover+{
++++width:+300px;
}

body+{
++++width:+500px;
++++border:+solid+black+1px;
}




sample|code-block|syntax|javascript|9n1am|通过将div向右浮动，您的div将从右侧开始。当它扩展时，它会向左扩展。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

Maybe you can try something like this:

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 
div {
 float: right;

 width: 100px;
 height: 100px;
 background: red;
 transition: width 2s;
 transition-timing-function: linear;
 text-align: center;
}

div:hover {
 width: 300px;
}

body {
 width: 500px;
 border: solid black 1px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;sample&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

By floating the div to the right, you will have your div starting at the right side. And when it expands, it will expand to the left.

entityMap|blocks|key|cevo5|text|这很简单，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|b4lcj|就像你从左到右的过渡一样，如果你想要从右到左的过渡，只需要使用float:right;当你设计你自己的样式时Div(ect)..。|offset|length|style|CODE^0|0|V|C^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@$E|K|F|L|G|H]]|A|@]|B|$]]]]

This is simple, Like your left to right Transition and if you want right to left Transition just use <code>float:right;</code> when you are styling you Div(ect).

entityMap|blocks|key|e4qq0|text|下面是使用transition的简单的左右滑动CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|834bt|++++++++Page+Title
++++
++++++++
++++++++.parent{
++++++++display:flex;
++++++++overflow:hidden;
++++++++}
++++++++.red,.blue,.green,.orange{
++++++++min-width:300px;
++++++++height:300px;
++++++++margin:10px;
++++++++position:relative;
++++++++left:0;
++++++++}
++++++++.d-none{
+++++++++display:none;
++++++++}
++++++++.red{
+++++++++background-color:red;
++++++++}
++++
++++++++.blue{
++++
++++++++background-color:blue;
++++++++}
++++
++++++++.green{
++++++++background-color:green;
++++++++}
++++
++++++++.orange{
++++++++background-color:orange;
++++++++}
++++++++
++++++++
++++++++
++++
++++++++
++++++++
++++++++
++++++++
++++++++
++++++++

++++++++
++++++++
++++++++
++++++++

++++++++
++++++++
++++++++
++++++++
++++++++
++++++++next
++++++++prev
++++++++
+++++++++let+left="0";
+++++++++let+parent+=+document.getElementById("parent")
+++++++++let+children+=+Array.from(parent.children)
+++++++++
+++++++++function+next(){
+++++++++++left+=+left+-+320
+++++++++++children.forEach(child=>{
+++++++++++child.style.left+=+left%2B"px"
+++++++++++child.style.transition+=+"all+500ms+ease-in-out"
+++++++++++})
+++++++++}
+++++++++
++++++++++function+prev(){
++++++++++left+=+left+%2B+320
+++++++++children.forEach(child=>{
+++++++++++child.style.left+=+left%2B"px"
+++++++++++child.style.transition+=+"all+500ms+ease-in-out"
++++
+++++++++++})
++++++++++++++
+++++++++}|code-block|syntax|javascript|ejmjj|​^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

Here is the simple sliding left-right CSS using transition.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Page Title&lt;/title&gt;
 
 &lt;style&gt;
 .parent{
 display:flex;
 overflow:hidden;
 }
 .red,.blue,.green,.orange{
 min-width:300px;
 height:300px;
 margin:10px;
 position:relative;
 left:0;
 }
 .d-none{
 display:none;
 }
 .red{
 background-color:red;
 }
 
 .blue{
 
 background-color:blue;
 }
 
 .green{
 background-color:green;
 }
 
 .orange{
 background-color:orange;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 
 &lt;div id="parent"class="parent"&gt;
 &lt;div class="red"&gt;&lt;/div&gt;
 &lt;div class="blue"&gt;&lt;/div&gt;
 &lt;div class="green"&gt;&lt;/div&gt;
 &lt;div class="orange"&gt;&lt;/div&gt;

 &lt;div class="red"&gt;&lt;/div&gt;
 &lt;div class="blue"&gt;&lt;/div&gt;
 &lt;div class="green"&gt;&lt;/div&gt;
 &lt;div class="orange"&gt;&lt;/div&gt;

 &lt;div class="red"&gt;&lt;/div&gt;
 &lt;div class="blue"&gt;&lt;/div&gt;
 &lt;div class="green"&gt;&lt;/div&gt;
 &lt;div class="orange"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;button onclick="next()"&gt;next&lt;/button&gt;
 &lt;button onclick="prev()"&gt;prev&lt;/button&gt;
 &lt;script&gt;
 let left="0";
 let parent = document.getElementById("parent")
 let children = Array.from(parent.children)
 
 function next(){
 left = left - 320
 children.forEach(child=&gt;{
 child.style.left = left+"px"
 child.style.transition = "all 500ms ease-in-out"
 })
 }
 
 function prev(){
 left = left + 320
 children.forEach(child=&gt;{
 child.style.left = left+"px"
 child.style.transition = "all 500ms ease-in-out"
 
 })
 
 }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
</div>
</div>

ease-out normally move from left to right, now I want change it to right to left
How can I set it in my CSS ?

example :

<pre><code>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;
</code></pre>

transition ease-out, right to left, how?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 缓出通常从左到右移动，现在我想将其更改为从右到左如何在我的CSS中设置它？ 示例： transition:         background-position 150ms ease-out;-moz-transition:    background-position 150ms ease-out;-webkit...

问过渡缓出，从右到左，如何？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问过渡缓出，从右到左，如何？EN