过渡缓出，从右到左，如何？
过渡缓出，从右到左，如何？
提问于 2014-03-01 22:52:05
缓出通常从左到右移动，现在我想将其更改为从右到左如何在我的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;回答 4
Stack Overflow用户
回答已采纳
发布于 2014-03-02 00:56:36
没有默认值方向对于过渡调整属性。和ease-out只是一个
从等级库
The transition-timing-function属性描述如何计算转换期间使用的中间值。它允许转换在其持续时间内改变速度。这些效果通常被称为缓和函数。在这两种情况下，都会使用提供平滑曲线的数学函数。
方向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; }工作演示..。
Stack Overflow用户
发布于 2015-05-11 13:45:00
也许你可以尝试这样做：
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通过将div向右浮动，您的div将从右侧开始。当它扩展时，它会向左扩展。
Stack Overflow用户
发布于 2021-02-24 14:24:31
下面是使用transition的简单的左右滑动CSS。
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+"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"
})
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22115842
复制相关文章
相似问题
腾讯云开发者
