{"id":34104,"date":"2017-11-03T03:01:39","date_gmt":"2017-11-02T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34104"},"modified":"2017-11-02T19:23:05","modified_gmt":"2017-11-02T09:23:05","slug":"css3-button-animation-transition-game-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-sharing-tutorial\/","title":{"rendered":"CSS3 Button Animation Transition Game Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Button Animation Transition Game Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/animated_button_game_email.jpg\" title=\"CSS3 Button Animation Transition Game Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Button Animation Transition Game Sharing Tutorial<\/p><\/div>\n<p>There are some familiar &#8220;items&#8221; with today&#8217;s additional functionality to yesterday&#8217;s <a title='CSS3 Button Animation Transition Game Tutorial' href='#css3batgt'>CSS3 Button Animation Transition Game Tutorial<\/a> &#8230; and some other matters we encourage you to consider, the primary one of <b>these<\/b> being &#8230;<\/p>\n<ul>\n<li><b>the benefits of multiple class HTML element definitions where the <i>C<\/i>ascading in <i>C<\/i>SS comes into (its hierarchical) play with first class being a &#8220;template&#8221; one refined by second class &#8220;localizing&#8221; styles<\/b> &#8230; we instigated before familiar &#8230;<\/li>\n<li>localization of our Animated Button Game allowing the user to define their own &#8220;Phrase or Proverb&#8221; versus &#8220;Explanation of phrase or proverb&#8221; relationship &#8230; and our favourite &#8230;<\/li>\n<li>sharing email (via client email <i>a<\/i> link to <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> href element) mechanism for &#8230;\n<ol>\n<li>email link to game &#8230; and\/or &#8230;<\/li>\n<li>email link to game with any localizations and as a challenge to an emailee (with the same order of questioning) and a &#8221; versus otherscore\/othergoes&#8221; flagging of <i>score<\/i> HTML element<\/li>\n<\/ol>\n<\/li>\n<li>interfacing to the user via new &#8220;character&#8221; and emoji and &#8220;emoji plus <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> button&#8221; (as a new means by which we can effect a multiple emoji &#8220;feel&#8221;)<\/li>\n<\/ul>\n<p>The (new version of the) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.htm\" 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.htm\">animated_button_game.htm<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html-GETME\" title=\"animated_button_game.htm\">this way<\/a> for this work today, the biggest block of change representing how that CSS started using <b>multiple class definitions<\/b> like &#8230;<\/p>\n<p><code><br \/>\n class=\"<b>button <\/b>button1\"<br \/>\n<\/code><\/p>\n<p> &#8230; and reduced the CSS definition from right hand side to left hand side as below &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>New multiple class CSS<\/th>\n<th>Old single class use CSS<\/th>\n<\/tr>\n<tr>\n<td>&lt;style&gt;<br \/>\nselect {<br \/>\n  width:70%;<br \/>\n  border: 2px solid pink;<br \/>\n}<\/p>\n<p>.button {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #f4511e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button1 {<br \/>\n  background-color: #f4511e;<br \/>\n}<\/p>\n<p>.button1 span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n}<\/p>\n<p>.button2 {<br \/>\n  background-color: #511ef4;<br \/>\n}<\/p>\n<p>.button2 span:after {<br \/>\n  content: &#8216;make light work.&#8217;;<br \/>\n}<\/p>\n<p>.button3 {<br \/>\n  background-color: #51f41e;<br \/>\n}<\/p>\n<p>.button3 span:after {<br \/>\n  content: &#8216;in the hand is worth two in the bush.&#8217;;<br \/>\n}<\/p>\n<p>.button4 {<br \/>\n  background-color: #154f1e;<br \/>\n}<\/p>\n<p>.button4 span:after {<br \/>\n  content: &#8216;in time saves nine.&#8217;;<br \/>\n}<\/p>\n<p>.button5 {<br \/>\n  background-color: #1577e1;<br \/>\n}<\/p>\n<p>.button5 span:after {<br \/>\n  content: &#8216;gather no moss.&#8217;;<br \/>\n}<\/p>\n<p>.button6 {<br \/>\n  background-color: #cea5b1;<br \/>\n}<\/p>\n<p>.button6 span:after {<br \/>\n  content: &#8216;and no play makes Jack a dull boy.&#8217;;<br \/>\n}<\/p>\n<p>.button7 {<br \/>\n  background-color: #ceab51;<br \/>\n}<\/p>\n<p>.button7 span:after {<br \/>\n  content: &#8216;is the mother of invention.&#8217;;<br \/>\n}<\/p>\n<p>.button8 {<br \/>\n  background-color: #1eab5c;<br \/>\n}<\/p>\n<p>.button8 span:after {<br \/>\n  content: &#8216;is worth a thousand words.&#8217;;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/td>\n<td>&lt;style&gt;<br \/>\nselect {<br \/>\n  width:70%;<br \/>\n  border: 2px solid pink;<br \/>\n}<\/p>\n<p>.button1 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #f4511e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button1 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button1 span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button1:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button1:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button2 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #511ef4;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button2 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button2 span:after {<br \/>\n  content: &#8216;make light work.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button2:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button2:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button3 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #51f41e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button3 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button3 span:after {<br \/>\n  content: &#8216;in the hand is worth two in the bush.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button3:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button3:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button4 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #154f1e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button4 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button4 span:after {<br \/>\n  content: &#8216;in time saves nine.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button4:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button4:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button5 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #1577e1;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button5 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button5 span:after {<br \/>\n  content: &#8216;gather no moss.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button5:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button5:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button6 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #cea5b1;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button6 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button6 span:after {<br \/>\n  content: &#8216;and no play makes Jack a dull boy.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button6:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button6:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button7 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #ceab51;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button7 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button7 span:after {<br \/>\n  content: &#8216;is the mother of invention.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button7:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button7:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button8 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #1eab5c;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button8 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button8 span:after {<br \/>\n  content: &#8216;is worth a thousand words.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button8:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button8:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/td>\n<\/tr>\n<\/table>\n<p>Cute, huh?!<\/p>\n<hr>\n<p id='css3batgt'>Previous relevant <a target=_blank title='CSS3 Button Animation Transition Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-tutorial\/'>CSS3 Button Animation 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\/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<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='#d34104' onclick='var dv=document.getElementById(\"d34104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34104' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are some familiar &#8220;items&#8221; with today&#8217;s additional functionality to yesterday&#8217;s CSS3 Button Animation Transition Game Tutorial &#8230; and some other matters we encourage you to consider, the primary one of these being &#8230; the benefits of multiple class HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-sharing-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,210,281,282,2382,367,380,385,476,477,576,652,2383,997,2366,1866,1953,1133,1137,2378,1319],"class_list":["post-34104","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-animation-2","tag-button","tag-class","tag-css","tag-css3","tag-disabled","tag-dropdown","tag-email","tag-emoji","tag-game","tag-games-2","tag-html","tag-javascript","tag-localization","tag-programming","tag-readonly","tag-select","tag-selector","tag-share","tag-sharing","tag-transition","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34104"}],"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=34104"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34104\/revisions"}],"predecessor-version":[{"id":34110,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34104\/revisions\/34110"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}