CODEWITHSUNDEEP
cssanimation
Sam Kelham
Sam Kelham

Reputation: 21

Animation on hover

Having a slight problem with some CSS3 animations.

On the main navigation that runs below the header, which starts with About and ends on Contact and Downloads. When I hover over the li's the animation plays again. Which is not what I want to happen. I would like to play initially when page loads - that's it.

Here is the link: http://wilkins.epixdev1.co.uk/

and here's the CSS code:

-webkit-animation-name: slideDown;
-webkit-animation-iteration-count: once;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 2s;   
-webkit-animation-delay: 3s;
-moz-animation-name: slideDown;
-moz-animation-iteration-count: once;
-moz-animation-fill-mode: forwards;
-moz-animation-duration: 2s;   
-moz-animation-delay: 3s;
animation-name: slideDown;
animation-iteration-count: once;
animation-fill-mode: forwards;
animation-duration: 2s;
animation-delay: 3s;

And here are the keyframes:

@-webkit-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-moz-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-o-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-ms-keyframes slideDown{0% {top: -59px;} 100% {top: 0px;}}
@keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}

Any help would be greatly appreciated.

Upvotes: 1

Views: 4526

Answers (4)

DJmRek
DJmRek

Reputation: 388

i think there's a problem in your style.css:

#access li:hover    {
-webkit-animation:none;
-moz-animation:none;
-o-animation:none;
-ms-animation:none;
animation:none;
}

Set the animation to none at hover the outer li but then it get's release by going on the inner Elements. So it roll back to the normal animation and do it again once ;)

Upvotes: 1

Mohsen Safari
Mohsen Safari

Reputation: 6795

remove this style from your CSS:

#access li:hover {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}

Upvotes: 0

Andrew
Andrew

Reputation: 5340

Try remove these css lines ( start on line 211 )

#access li:hover    {
-webkit-animation:none;
-moz-animation:none;
-o-animation:none;
-ms-animation:none;
animation:none;
}

-webkit-animation-iteration-count: once; is invalid, but it's default to 1, so when the animatio finished, it won't start again, and I think animation:none will break this and reset the animation.

Upvotes: 2

iiic
iiic

Reputation: 1352

IMHO css3 animation cannot be run on hover. Isn't it some other type of effect? Css3 transtion or some javascript?

Upvotes: -1

Related Questions