{"id":34085,"date":"2017-11-02T03:01:53","date_gmt":"2017-11-01T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34085"},"modified":"2017-11-01T20:06:49","modified_gmt":"2017-11-01T10:06:49","slug":"css3-button-animation-transition-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-tutorial\/","title":{"rendered":"CSS3 Button Animation Transition Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Button Animation Transition Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/animated_button_game.jpg\" title=\"CSS3 Button Animation Transition Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Button Animation Transition Game Tutorial<\/p><\/div>\n<p>The recent <a title='CSS3 Transition Game Tutorial' href='#css3tgt'>CSS3 Transition Game Tutorial<\/a> had us examining <a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a> as tools for animation styling.  Today we &#8230;<\/p>\n<ul>\n<li>apply such &#8220;transition&#8221; thinking to the animation of HTML button elements (as inspired by <a target=_blank title='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1'>https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1<\/a> thanks) &#8230; in terms of &#8230;<\/li>\n<li>creating a game whereby the user links a (most often based on <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> sources, thanks) &#8220;proverb or phrase explanation&#8221; the game randomly selects for the user in an HTML select element dropdown (made to be &#8220;readonly&#8221; via the use of the <a target=_blank title='HTML element disabled attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_disabled.asp'>disabled<\/a>=&#8221;disabled&#8221; attribute) &#8230; to &#8230;<\/li>\n<li>HTML button elements initially showing a prefix &#8230; that when &#8230;<\/li>\n<li>hovered over CSS3 &#8220;transition&#8221; animation also channelling the checked against the <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> selector to show a full proverb or phrase as the user selection &#8230;<\/li>\n<li>Javascript checked against <a target=_blank title='HTML and Javascript data attribute information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/Guide\/HTML\/Using_data_attributes'><i>data attributed<\/i><\/a> (to hide from &#8220;nosy&#8221; users) the link to &#8220;explanation&#8221; correct matches to &#8230;<\/li>\n<li>increase the user&#8217;s score in the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html\" title=\"Click picture\">game<\/a>&#8216;s HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html_GETME\" title=\"animated_button_game.html\">animated_button_game.html<\/a><\/li>\n<\/ul>\n<p>Do you remember a recent <a title='Recent Stop Press' href='#pstopp'>&#8220;Stop Press&#8221;<\/a> explaining a neat way to get mobile platforms to effectively map their onclick event logic to an onmouseover event based Javascript logic set, via the application of &#8230;<\/p>\n<p><code><br \/>\n onclick=\"\"<br \/>\n<\/code><\/p>\n<p> &#8230; HTML element (today that being a <i>button<\/i> element) logic?  Well, today that is used again to allow for this game to be played on mobile devices, but just with those users clicking buttons rather than the &#8220;hover&#8221; that a non-mobile user does to play the same game.<\/p>\n<hr>\n<p id='css3tgt'>Previous relevant <a target=_blank title='CSS3 Transition Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-game-tutorial\/'>CSS3 Transition Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Transition Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/css3_transitions_game.jpg\" title=\"CSS3 Transition Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Transition Game Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='CSS3 Transition Primer Tutorial' href='#css3tpt'>CSS3 Transition Primer Tutorial<\/a> started us thinking about <a target=_blank title='CSS3 specification information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a>, and there, we intimated that they could be used to serve up to the web application user simple animation functionality.  Today, we go a bit further down that road exporing a few more ideas in this line of work, along the way using &#8220;transitions&#8221; in a simple spider game as below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm?game=y' style='width:100%;height:920px;' title='Spider Game'><\/iframe><\/p>\n<p>Added into the &#8220;transitions&#8221; usage, building on yesterday, are the concepts (all available to read further on <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>here<\/a>, thanks) &#8230;<\/p>\n<ul>\n<li>multiple &#8220;concept&#8221; transitions<\/li>\n<li>transition-timing-function modes of use<\/li>\n<li>transition (CSS styling) <i>definition<\/i> separated out into its 3 constituent parts &#8230;\n<ol>\n<li>transition-property<\/li>\n<li>transition-delay<\/li>\n<li>transition-duration<\/li>\n<\/ol>\n<p>&#8230; as per &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.cdiv {<br \/>\n    width: 300px;<br \/>\n    height: 200px;<br \/>\n    background: red;<br \/>\n    -webkit-transition-delay: 3s;<br \/>\n    transition-delay: 3s;<br \/>\n    -webkit-transition-property: height, width; \/* Safari *\/<br \/>\n    transition-property: height, width;<br \/>\n    -webkit-transition-duration: 4s, 22s; \/* Safari *\/<br \/>\n    transition-duration: 4s, 22s;<br \/>\n}<br \/>\n<br \/>\n.cdiv:hover {<br \/>\n    width: 600px;<br \/>\n    height: 400px;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>The game today recalls the recent <a target=_blank title='CSS3 Background Size Contain and Cover Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/'>CSS3 Background Size Contain and Cover Primer Tutorial<\/a> use of the CSS <i>background-size<\/i> <i>contain<\/i> and <i>cover<\/i> attribute values that we harness to (lamely, admittedly) make (just one of our) spiders rear up, and mildly scare our web application game users (perhaps a few of which are rolling on the floor in apopleptic laughter).<\/p>\n<p>The HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html-GETME\" title=\"css3_transitions.htm\">css3_transitions.htm<\/a> HTML and CSS and Javascript source code, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html-GETME\" title=\"css3_transitions.htm\">this way<\/a>.<\/p>\n<hr>\n<p id='css3tpt'>Previous relevant <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial\/'>CSS3 Transition Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Transition Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/css3_transitions.jpg\" title=\"CSS3 Transition Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Transition Primer Tutorial<\/p><\/div>\n<p>The <a target=_blank title='CSS3 specification information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification introduced <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a> to CSS styling of web pages.  A CSS3 &#8220;transition&#8221; &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'><p>\nCSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.\n<\/p><\/blockquote>\n<p>Today, we use the CSS <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector as the basis for transitions in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html_GETME\" title=\"css3_transitions.html\">css3_transitions.html<\/a> HTML and CSS source code.<\/p>\n<p>As you might surmise using this web application, CSS3 &#8220;Transitions&#8221; can act like simple animations.<\/p>\n<p id='pstopp'><b><\/i>Stop Press<\/i><\/b><\/p>\n<p>The CSS <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector is not a &#8220;good fit&#8221; (euphemism for &#8220;it doesn&#8217;t work, Bud!&#8221;) on mobile platforms.  Looking around the &#8220;net&#8221; got to this <a target=_blank title='Great link, thanks' href='https:\/\/stackoverflow.com\/questions\/22559756\/changing-hover-to-touch-click-for-mobile-devices'>great link<\/a>, thanks, which suggested adding <i>onlick=&#8221;&#8221;<\/i> on all relevant <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector HTML elements, to allow for (and it only really makes sense when the real <i>onclick<\/i> event meaning is not needed) the <i>onclick<\/i> event to be simulating the <i>onmouseover<\/i> event, for those mobile platforms missing the real <i>onmouseover<\/i> event.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34023' onclick='var dv=document.getElementById(\"d34023\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34023' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34038' onclick='var dv=document.getElementById(\"d34038\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34038' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34085' onclick='var dv=document.getElementById(\"d34085\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34085' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent CSS3 Transition Game Tutorial had us examining CSS3 (Cascading Style Sheet) specification &#8220;Transitions&#8221; as tools for animation styling. Today we &#8230; apply such &#8220;transition&#8221; thinking to the animation of HTML button elements (as inspired by https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1 thanks) &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[84,174,281,282,2382,367,476,477,576,652,997,2366,1866,1953,2378,1319],"class_list":["post-34085","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-animation-2","tag-button","tag-css","tag-css3","tag-disabled","tag-dropdown","tag-game","tag-games-2","tag-html","tag-javascript","tag-programming","tag-readonly","tag-select","tag-selector","tag-transition","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34085"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34085"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34085\/revisions"}],"predecessor-version":[{"id":34097,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34085\/revisions\/34097"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}