Question

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

Answer 1

transition属性没有默认的方向。 ease-out只是 transition timing function ：

来自Spec：

transition-timing-function属性描述了如何将计算转换期间使用的中间值。它允许转换以在其持续时间内改变速度。这些效果通常称为缓动函数。在任何一种情况下，a 使用提供平滑曲线的数学函数。

background-position转换的方向取决于第一个和最后值。

例如：

.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

Answer 2

也许你可以尝试这样的事情：

select id_mitra
      ,company_name 
from ref_mitra
where reject = false 
and DATE_DIFF(now(),date_status) > 3 
and active='N';

通过将div浮动到右侧，您将从右侧开始div。当它扩展时，它会向左扩展。

Answer 3

这是使用过渡的简单的左右滑动 CSS。

<!DOCTYPE html>
        <html>
        <head>
        <title>Page Title</title>
    
        <style>
        .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;
        }
        </style>
        </head>
        <body>
    
        
        <div id="parent"class="parent">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>

        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>

        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>
        </div>
        <button onclick="next()">next</button>
        <button onclick="prev()">prev</button>
        <script>
         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+"px"
           child.style.transition = "all 500ms ease-in-out"
           })
         }
         
          function prev(){
          left = left + 320
         children.forEach(child=>{
           child.style.left = left+"px"
           child.style.transition = "all 500ms ease-in-out"
    
           })
              
         }
         
        </script>
        </body>
        </html>

Answer 4

这很简单，例如你从左到右过渡，如果你想要从右到左过渡只需使用float:right;为你设计 Div（ect）。

过渡缓和，从右到左，如何？

4 个答案: