Jump to content

Animation-play-state?


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...