带有悬停的 CSS 动画 - 为什么它在第一次迭代后重置为初始设置？

Question

我正在更新我的作品集网站：http://jcdevelopmentsite.com/jcwebandgraphic/index.html#services。我正在 Font Awesome 图标上创建 CSS 动画悬停效果。过渡效果很好，但一旦完成，它就会重置为悬停前设置。我希望它在悬停期间保持背景颜色。这可以用纯 CSS 实现吗？

超文本标记语言

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

CSS

@keyframes animate {
    from {}
    to { background-color: #332D29; }
    }
        .services:hover {
            animation-name: animate;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-timing-function: ease-in-out;  
            outline: 1px solid #ffffff;
            }

Answer 1

这是动画的默认行为。

你只需要添加这个属性：

animation-fill-mode: forwards;

顺便说一句，对于这种情况，可能会使用 CSS3 过渡：

.services{
    transition: background-color 1s ease-in-out;
}

.services:hover{
    background-color: #332D29;
    outline: 1px solid #FFFFFF;
}