是否有一种方法可以在粘贴按钮的右侧添加延迟和淡出?

Question

我写了下面的代码:

.your-button {
position: fixed;
z-index: 1;
left: -1%;
bottom: -1%; 
width: 3.2rem; 
}

但是我希望添加一个延迟，这样它就会出现在页面的中间，并有一个从右边逐渐淡入的运动效果。

有人能帮忙吗?

Answer 1

CSS从右渐入。希望你能从这个例子中学到足够的东西，把它应用到你的情况中。

div {
margin: 20px;
padding: 0;
height: 100px;
position: relative;
overflow: hidden;
border-left: 1px solid gray;
}
.btn {
display: block;
margin-left: 20px;
position: absolute;
bottom: 0;
opacity: 0;
left: -70px;
transition: left .5s, opacity 1s;
}
div:hover .btn {
left: 0;
opacity: 1;
}

<div>
Hover here
<button class="btn fade" type="button">Hello</button>
</div>