如何过渡动画条并改变动画CSS的方向？答案

【问题标题】：how to transition animated strips and change the direction of animation CSS?如何过渡动画条并改变动画CSS的方向？
【发布时间】：2019-09-28 14:36:15
【问题描述】：

您好，我正在尝试过渡动画。我有一个按钮，当您将鼠标悬停时，它会为背景大小设置动画以移动条纹。

目前动画向右移动，但我希望它向左移动。

第二个问题是，当我将鼠标从按钮上移开并且不再悬停时，我希望它过渡并移动到左侧。

代码：

.btn2{
    background: repeating-linear-gradient(to right, #3B8A7D, #3B8A7D 
    9px, #54BC9B 9px, #54BC9B 18px);
    background-size: 20px 10px;
    border: solid 2px #54BC9B;
 }

.btn2:hover{
    background: repeating-linear-gradient(to right, #3B8A7D, #3B8A7D 10px, #54BC9B 10px, #54BC9B 18px);
    background-size: 150% 100%;
    border: solid 2px #54BC9B;
    animation: greenstripes 0.5s linear;
 }


@keyframes greenstripes {
   0% {
       background-position: 0 0;
   }
   100% {
       background-position: -75px 0px;
   }
   transition: all 0.3s ease 0s;
}

【问题讨论】：

标签： css

【解决方案1】：

我想说，仅通过 CSS 实现 onmousein（悬停）和 onmouseout 向左滚动是不可能的。你可以用javascript来实现它。不过，我为动画添加了 CSS 代码，在 background-position-x 上进行了转换。

.btn2{
    --button-primary-background-color: #54BC9B;
    --button-secondary-background-color: #3B8A7D;

    background: repeating-linear-gradient(to right,
       var(--button-secondary-background-color),
       var(--button-secondary-background-color) 10px,
       var(--button-primary-background-color) 10px,
       var(--button-primary-background-color) 20px);
    border: solid 2px var(--button-primary-background-color);
    background-position-x: 100px;
    padding: 0.5rem 1rem;

    color: #fff;
    font-weight: bold;

    transition: background-position-x 1s;
 }

.btn2:hover{
    background-position-x: 0px;
 }

&lt;input type="button" class="btn2" value="Hover me" /&gt;

【讨论】：