Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mona Jalal
Mona Jalal
4,302 Points

CSS animation not working

I have this and I want to animate (pulse one) when I hover over any of the navbar items or when I hover a list item or a well. And when I hover off I want the item get back to its previous shape immediately.

.navbar-collapse li { animation: pulse 2s;

}
.navbar-collapse li:hover {
    background: #fccdd3;
    animation-play-state: running;
}
.list-group-item li {
    animation: pulse 2s;

}

.list-group-item li:hover{
    background: #fccdd3 !important;
    animation-play-state: running;

}

.well {
    animation: pulse 2s;

}
.well:hover {
    background: #fccdd3 !important;
    animation-play-state: running;


}

@keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } }

here's my website, please let me know what is wrong? http://monajalal.com

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Mona! Haven't you learned how to blockquote your code yet? :wink:

Check the Markdown Cheatsheet pop-up below the answer box for a reminder. :arrow_heading_down:

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You forgot to supply the HTML to allow your problem to be replicated, but if I understand what you want, you should be able to just define the animation in the hover rule (and get rid of the non-hover rule). Add infinite if you want it to continue while the pointer stays in.

Since it's only defined for the hover condition, as soon as you move the mouse away the animation stops.

.navbar-collapse li:hover {
  background: #fccdd3;
  animation: pulse 2s infinite;
}

Also, you only need the 50% keyframe. You can get rid of the other two because they just set the default values.

Happy coding!   -sp:sparkles: