Css Animation with Hover - Why is it reset for initial settings after first iteration?
I am updating my portfolio at http://jcdevelopmentsite.com/jcwebandgraphic/index.html#services . I am creating a CSS animation animation effect on font Awesome icons. The transition works well, but as soon as it ends, it resets to pre-hover settings. I would 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;
}
+3
source to share
1 answer
This is the default behavior for animations.
You just need to add this property:
animation-fill-mode: forwards;
On the side of the note, there might be a use of CSS3 transitions for this case:
.services{
transition: background-color 1s ease-in-out;
}
.services:hover{
background-color: #332D29;
outline: 1px solid #FFFFFF;
}
+4
source to share