davej Posted July 11, 2013 Share Posted July 11, 2013 (edited) 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 July 11, 2013 by davej Link to comment Share on other sites More sharing options...
Obi1-Cannabis Posted July 19, 2013 Share Posted July 19, 2013 You'll need to use -webkit-animation-fill-mode -webkit-animation-fill-mode: forwards; leaves the animation in the last frame -webkit-animation-fill-mode: backwards; leaves the animation in the start frame Link to comment Share on other sites More sharing options...
davej Posted July 19, 2013 Author Share Posted July 19, 2013 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 More sharing options...
Obi1-Cannabis Posted July 23, 2013 Share Posted July 23, 2013 setting animation-fill-mode: forwards means that after the animation has completed execution i will hold at its final properties until the animation is removed. i guess i don't really understand what you are trying to acomplish. Link to comment Share on other sites More sharing options...
davej Posted July 24, 2013 Author Share Posted July 24, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now