{"id":34038,"date":"2017-10-30T03:01:01","date_gmt":"2017-10-29T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34038"},"modified":"2017-11-01T19:43:05","modified_gmt":"2017-11-01T09:43:05","slug":"css3-transition-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-game-tutorial\/","title":{"rendered":"CSS3 Transition Game Tutorial"},"content":{"rendered":"<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><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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s CSS3 Transition Primer Tutorial started us thinking about CSS3 (Cascading Style Sheet) specification &#8220;Transitions&#8221;, 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 &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-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":[4,12,14,37],"tags":[84,126,2379,281,282,2380,2091,576,652,795,861,871,2377,1953,1200,2378,1319],"class_list":["post-34038","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-background","tag-background-size","tag-css","tag-css3","tag-delay","tag-duration","tag-html","tag-javascript","tag-mobile","tag-onclick","tag-onmouseover","tag-programmig","tag-selector","tag-stop-press","tag-transition","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34038"}],"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=34038"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34038\/revisions"}],"predecessor-version":[{"id":34095,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34038\/revisions\/34095"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}