CODEWITHSUNDEEP
htmlcsscss-animations
user2287917
user2287917

Reputation: 91

Css Animation with Hover - Why does it reset to initial settings after first iteration?

I'm updating my portfolio site at http://jcdevelopmentsite.com/jcwebandgraphic/index.html#services. I'm creating a CSS animation hover effect on the Font Awesome icons. The transition works well, but once it finishes, it resets to the pre-hover settings. I'd like it to hold the background-color for the duration of the hover. Is this possible with pure CSS?

HTML

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

Upvotes: 3

Views: 3117

Answers (1)

Jad Joubran
Jad Joubran

Reputation: 2579

This is the default behavior for animations.

You just need to add this property:

animation-fill-mode: forwards;

On a side note, for this case it might be to use CSS3 transitions:

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

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

Upvotes: 5

Related Questions