axisphere Posted July 11, 2011 Share Posted July 11, 2011 Hi,I am currently trying my best to learn as much CSS3 and HTML5 as possible to make a little webapp for ipad, anyway the vast majority of my webapp will need some cool slick animation (im guessing that CSS3 is the best route for that)Anyway I understand how to do rotations, scale, opacity, translations via -webkit in CSS3 but can only get :hover events to trigger the animations, ow what I need to do is get them on onclick (mouse click)I have written this below HTML & CSS3 to make a square animate around the screen, can anyone help me get a onclick event to trigger the animation?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css"> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-webkit-animation:myfirst 5s;}@-webkit-keyframes myfirst{0% {background:red; left:0px; top:0px; -webkit-transform:rotate(360deg);}25% {background:yellow; left:200px; top:0px;-webkit-transform:rotate(0deg);}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;-webkit-transform:rotate(0deg);}100% {background:red; left:0px; top:0px;-webkit-transform:rotate(360deg);}}</style></head><body><p><b>Test</b></p><div></div></body></html> Link to comment Share on other sites More sharing options...
axisphere Posted July 11, 2011 Author Share Posted July 11, 2011 Ok I managed to figure something out.... only problem is it only clicks on once how can i click on it multiple times (after animation has finished) They do it on the little 2D and 3D rotate things on this page (just cant figure it out) http://www.w3schools.com/css3/css3_3dtransforms.aspMy code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css"> div{width:200px;height:200px;background:red;position:relative;}.test{animation:myfirst 10s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */}@-webkit-keyframes myfirst /* Safari and Chrome */{0% {background:red; left:0px; top:0px; -webkit-transform:rotate(360deg);}25% {background:yellow; left:200px; top:0px;-webkit-transform:rotate(0deg);}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;-webkit-transform:rotate(0deg);}100% {background:red; left:0px; top:0px;-webkit-transform:rotate(360deg);}}</style></head><body><div onClick="className='test'"></div></body></html> Link to comment Share on other sites More sharing options...
MrFish Posted July 12, 2011 Share Posted July 12, 2011 These properties will only work for webkit browsers (chrome and safari). If it's for ipad and ipad uses webkit then I guess that's not a problem. But just want to point that out first.CSS can only have single states and cannot be used for smooth transitioning from one property to another alone. You will need to use javascript to do that. Link to comment Share on other sites More sharing options...
axisphere Posted July 12, 2011 Author Share Posted July 12, 2011 These properties will only work for webkit browsers (chrome and safari). If it's for ipad and ipad uses webkit then I guess that's not a problem. But just want to point that out first.CSS can only have single states and cannot be used for smooth transitioning from one property to another alone. You will need to use javascript to do that.Yeah I figured that the webkit commands are only good for certian browsers, anyway thanks for the headsup on the Javascript thing. I'm a little in the dark with javascript could you point me towards a good example of a javascrip going between two states? Link to comment Share on other sites More sharing options...
ShadowMage Posted July 12, 2011 Share Posted July 12, 2011 CSS can only have single states and cannot be used for smooth transitioning from one property to another alone. You will need to use javascript to do that.Actually, that is exactly what CSS transitions and animations do. You no longer need JavaScript to perform smooth animations from one property to another.However, you cannot bind the transition/animation to a click without JavaScript. You may be able to use the :focus psuedo class, but that will also trigger when the user tabs to the element. If you're trying to animate non-input elements (divs, spans, etc.), though, the :focus psuedo class probably won't work, since those kinds of elements cannot receive focus.EDIT:This page has some pretty good examples:http://css3.bradshawenterprises.com/all/ Link to comment Share on other sites More sharing options...
axisphere Posted July 12, 2011 Author Share Posted July 12, 2011 Ok Cool sounds good,I'm a little new to all of this being a CG artist 'n all, could you give me a quick example of th e HTML, JAVA and CSS3 that would say animate a simple box or image with translations and rotations that can be triggered VIA a click then return to its default animation that then could be reactivated via a click again..soAnimation_01 ==> CLICK ==> Animation_02 ===> (Back to) Animation_01 ==> CLICK ==> Animation_02 (and so on)That would be a real help Link to comment Share on other sites More sharing options...
thescientist Posted July 12, 2011 Share Posted July 12, 2011 javascriptany luck googling for the info first? Link to comment Share on other sites More sharing options...
ShadowMage Posted July 12, 2011 Share Posted July 12, 2011 The link I provided has a few examples of using JavaScript to bind transition effects to click events. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.