Jump to content

Animation-play-state?


davej
 Share

Recommended Posts

All of the css3 animation examples seem to cycle. Is there any option to run only once to the 100% keyframe and not return to the original 0% keyframe? I can't see any way for css to change the animation-play-state from running to paused.

 

http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

 

There is also a fill-mode...

 

http://dev.w3.org/csswg/css-animations/#animation-fill-mode-property

 

But maybe what I want is to use a transition...

 

http://www.w3schools.com/cssref/css3_pr_transition.asp

Edited by davej
Link to comment
Share on other sites

The only thing I seem to see is that a transition can give you a simple animation on both mouse-entry and mouse-exit while the animation with fill-mode provides a more complex animation but only on mouse-entry.

Link to comment
Share on other sites

I was playing with the idea of a css slide down menu.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Transition</title><style>.menu1 {   height: 22px;   overflow:hidden;   width: 110px;   padding: 5px;   background-color: green;   color: white;   transition: height 0.75s linear 0s; /*transition: property duration timing-function delay;*/   -moz-transition: height 0.75s linear 0s; /* Firefox 4 */   -webkit-transition: height 0.75s linear 0s; /* Safari and Chrome */   -o-transition: height 0.75s linear 0s; /* Opera */}.menu1:hover {   height: 150px;   background-color: blue;}.menu1 a {color: white;text-decoration: none;padding: 0px;margin: 0px;display: block;}.menu1 a:hover {   font-size: 1.1em;   background-color: #e0e0ff;   color: #0000ff;   border: 1px solid blue;}</style></head><body><div class="menu1"><a href="#">Menu Item 1</a><br/><a href="#">Menu Item 2</a><br/><a href="#">Menu Item 3</a><br/><a href="#">Menu Item 4</a></div><br/><br/><a href="http://www.w3schools.com/cssref/css3_pr_transition.asp">Transition</a></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...