CSS 过渡和背景图像的问题

Question

我现在正在一个网站上工作，当我们悬停在表单上时，那里正在发生木偶我的问题是：如何修复和设置我拥有的背景图像，以便在动画时显示(因此填充增加(但不从左向右滑动？

你有什么想法吗？

最好

这是 css 代码

 body .cf7-style.cf7-style-15648 {
  transition: all 1.5s;
}
.sent {
   background-image: url("http://www.site.fr/wp-content/uploads/2017/03/perverse-paul-serre.gif") !important ;
    background-position: right bottom;
  background-repeat: no-repeat;
  padding-right:205px !important;
}
.col.span_12.color-dark.left{
display: flex;
    justify-content: center;
    align-items: center;
}  
form.wpcf7-form.demo.cf7-style.cf7-style-15648:hover{
padding-right: 205px;
  transition: all 0.6s ease-in-out;
}
form.wpcf7-form.demo.cf7-style.cf7-style-15648{}
body .cf7-style.cf7-style-15648{
 padding-right: 10px;
}
@media only screen and (max-width: 767px){
.col.span_12.color-dark.left{
  display: block;
}
  form.wpcf7-form.demo.cf7-style.cf7-style-15648{
     width:100%;
       border:none;
       padding-right:205px;
     }
  .col.span_12.color-dark.left{
     margin-left: 10px;
     }
  .vc_col-sm-7.wpb_column.column_container.col.no-padding.color-dark{
        display: flex;
    justify-content: flex-end;
}
}

Answer 1

我在这里胡乱猜测，因为你的问题不是很清楚，但在这里......

在您的表单上，您有以下 CSS

body .cf7-style.cf7-style-15648:hover {
    background-image: url(http://www.test.bonnetdejour.fr/wp-content/uploads/2017/03/paul-form-1.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
}

这是将background-position设置为悬停。当您不将鼠标悬停在表单上时，这将使用默认的背景位置：

background-position: left top;

如果您在没有悬停的情况下在元素上设置背景位置，我认为它会做您想要的。

body .cf7-style.cf7-style-15648{
    background-position: right bottom;
    background-repeat: no-repeat;
}
body .cf7-style.cf7-style-15648:hover {
    background-image: url(http://www.test.bonnetdejour.fr/wp-content/uploads/2017/03/paul-form-1.gif);
}

对不起，如果我弄错了，但这是我最好的猜测，因为你的问题不清楚。