Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 animation: inactive, active and additional 'end' state?

CSS3 animation: inactive, active and additional 'end' state?

Problem

I have a button with an animated background on hover. It fills with a coloured background from Left to right, however currently on mouse out it reverses the animation; the colour shrinks back toward the left and disappears. On mouse out I would like the fill to continue moving from left to right, so that it disappears out the right of the button. Any ideas? An example of this can be seen on the 'VISIT WEBSITE' button here:

http://www.notashop.com.au/new/project/lifewithbird/

Ideally would like to do this using CSS3 animation, however im feeling the active/inactive state of css3 animation may be the limiting factor here. If it cant be done using CSS3 any ideas using jQuery? A jsfiddle would be much appreciated!

Thanks for your help!

Problem courtesy of: smulla1

Solution

Ready for something cool... You will need to make this multi browser friendly but thats easy. THis is ready in ff

here is the fiddle

.button {
    background: blue;
    width: 200px;
    height: 45px;
    position: relative;

}

.button:before {
    background: none repeat scroll 0 0 #FFFFFF;
    content: "";
    height: 45px;
    left: 100%;
    position: absolute;
    width: 200px;
    z-index: 1;
transition: all 0.5s ease;
}
.button:hover:before{
    -webkit-animation: left 1s;
  -moz-animation:    left 1s;
  -o-animation:      left 1s;
  animation:         left 1s;
  animation-fill-mode:forwards;
}
.button p{
    position: absolute;
    left: 50%;
    top: 5px;
    z-index: 2
}
@keyframes left {
    0% {left: -100%;}
    50% {animation-play-state: paused; }
    100%{left: 0%; animation-play-state: paused;}
}

Your gonna have allot of questions...

Solution courtesy of: Cam

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 animation: inactive, active and additional 'end' state?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×