{"id":34023,"date":"2017-10-29T03:01:40","date_gmt":"2017-10-28T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34023"},"modified":"2017-10-29T13:54:03","modified_gmt":"2017-10-29T03:54:03","slug":"css3-transition-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial\/","title":{"rendered":"CSS3 Transition Primer Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Transition Primer Tutorial<\/p><\/div>\n

The CSS3<\/a> (Cascading Style Sheet) specification introduced “Transitions”<\/a> to CSS styling of web pages. A CSS3 “transition” …<\/p>\n

\nCSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.\n<\/p><\/blockquote>\n

Today, we use the CSS :hover<\/i><\/a> selector as the basis for transitions in our live run<\/a>‘s css3_transitions.html<\/a> HTML and CSS source code.<\/p>\n

As you might surmise using this web application, CSS3 “Transitions” can act like simple animations.<\/p>\n

<\/i>Stop Press<\/i><\/b><\/p>\n

The CSS :hover<\/i><\/a> selector is not a “good fit” (euphemism for “it doesn’t work, Bud!”) on mobile platforms. Looking around the “net” got to this great link<\/a>, thanks, which suggested adding onlick=””<\/i> on all relevant :hover<\/i><\/a> selector HTML elements, to allow for (and it only really makes sense when the real onclick<\/i> event meaning is not needed) the onclick<\/i> event to be simulating the onmouseover<\/i> event, for those mobile platforms missing the real onmouseover<\/i> event.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n