Javascript 使用css3动画悬停时从右向左移动按钮

我正试图重现屏幕右侧按钮的效果

开始位置：

动画后的结束位置：

我已经完成了以下HTML代码：

<div id="btnFeedbackHome">
            <div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
            <p>Ideas & feedback</p>
        </div>

目前，我的代码显示结束位置，但我不知道如何在我的div上执行相同的转换效果

---

你能帮我吗？

我想这就是你想要的。任何疑问都可以问

正文
{
溢出x：隐藏；
}
#反馈回家{
宽度：180px；
高度：45px；
位置：绝对位置；
顶部：320px；
右：-135px；
过渡：所有0.5s缓进缓出；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
背景色：#35BDCF；
光标：指针；
}
#btnFeedbackHome p{
颜色：白色；
字号：600；
位置：绝对位置；
顶部：1px；
右：8px；
字体大小：14px；
}
#btnFeedbackHome分区{
宽度：45px；
背景色：#2A97A6；
高度：45px；
}
#反馈imgHomeBtn{
边缘顶部：9px；
左边距：7px；
}
#btnFeedbackHome：悬停
{
右：0px；
}

想法和反馈

您可以通过对元素进行简单的CSS转换来实现这一点。我创建了一个JSFIDLE，它构建在您的示例的基础上，以展示如何在不使用JavaScript的情况下实现这一点，因为您只需要在主容器中添加一个

悬停

如果你做了你所做的一切，只需将CSS更改为我这里的CSS，你将得到类似的效果：

#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -140px;
    background-color: #35BDCF;
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#btnFeedbackHome:hover {
    right: 0;
}

很高兴它对你有用。但要确保正文没有水平滚动条。
#btnFeedbackHome {
    width: 180px;
    height: 45px;
    position: absolute;
    top: 320px;
    right: -140px;
    background-color: #35BDCF;
    cursor: pointer;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#btnFeedbackHome:hover {
    right: 0;
}