过渡属性：悬停只能工作一次 - 如何让它在每个悬停上工作？

Question

严重挣扎着CSS动画和过渡。感谢另一位用户，我能解决一个转换问题，但它给了我另一个问题。我正在我的投资组合网站http://jcdevelopmentsite.com/jcwebandgraphic/index.html上工作。 “服务”部分有一些我正在应用这些效果的Font Awesome图标。它们运行良好，但是，悬停状态的转换仅对每个图标有效。我怎样才能解决这个问题，以确保每次都能恢复到初始状态？

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>

CSS

@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;
    }