Html 转换属性：悬停只工作一次-如何使其在每次悬停时都工作？

正在努力处理CSS动画和过渡。多亏了另一个用户，我能够解决一个过渡问题，但它给了我另一个。我正在我的投资组合网站上工作。“服务”部分有一些字体很棒的图标，我正在应用这些效果。它们工作得很好，但是，脱离悬停状态的转换只对每个图标工作一次。如何修复此问题以确保每次都能漂亮地转换回初始状态

HTML

---

他们似乎在为我工作。我不确定是什么问题。他们似乎在为我工作。我不确定是什么问题。

<section id='services-section'>
    <h2 class='highlight'>Services</h2>
    <div class='main-content'>
        <a href='#pricing-section'>
            <div class='services'>
                <i class='fa fa-laptop fa-4x'></i>
                <h5>Static & Fluid Layouts</h5>
            </div>
        </a>
        <a href='#pricing-section'>
            <div class='services'>
                <i class='fa fa-mobile fa-4x'></i>
                <h5>Responsive Layouts</h5>
            </div>
        </a>
        <a href='#pricing-section'>
            <div class='services'>
                <i class='fa fa-shopping-cart fa-4x'></i>
                <h5>E-Commerce Solutions</h5>
            </div>
        </a>
        <a href='#pricing-section'>
            <div class='services'>
                <i class='fa fa-pencil-square fa-4x'></i>
                <h5>Theme Customizations</h5>
            </div>
        </a>
    </div> <!-- Closes .main-content -->
</section>

@keyframes animate1 {
    from {}
    to { 
        background-color: #332D29;
        }
    }

.services {
    width: 20%;
    padding: 2.5%;
    text-align: center;
    transition: background-color 1s ease-in-out;
    float: left;
    }

.services:hover {
    animation-name: animate1;
    animation-duration: 1s;
    animation-iteration-count: infinity;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    }