{"id":33863,"date":"2017-10-22T03:01:52","date_gmt":"2017-10-21T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33863"},"modified":"2017-10-21T13:08:20","modified_gmt":"2017-10-21T03:08:20","slug":"css3-animations-with-javascript-dom-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-animations-with-javascript-dom-primer-tutorial\/","title":{"rendered":"CSS3 Animations with Javascript DOM Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Animations with Javascript DOM Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test_more.jpg\" title=\"CSS3 Animations with Javascript DOM Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Animations with Javascript DOM Primer Tutorial<\/p><\/div>\n<p>We&#8217;re extending some ideas first played with <a title='CSS3 @keyframes Rule Primer Tutorial' href='#css3@rpt'>CSS3 @keyframes Rule Primer Tutorial<\/a> regarding CSS3 Animations, an important topic.  Now in that previous work we never used Javascript, and today, we don&#8217;t clobber that version, because that is an important consideration here.  CSS3 Animations can speed up your webpages by doing away with so much Javascript load inefficiency, at its best.  But today, we introduce Javascript DOM logic in order to start you thinking about the flexibility of these @keyframes CSS3 Animation rules, adding today thoughts regarding dynamic arrangements for &#8230;<\/p>\n<ul>\n<li>animation duration<\/li>\n<li>animation delay<\/i>\n<li>colour<\/li>\n<li>background image<\/li>\n<\/ul>\n<p>So maybe you want to compare the old and the new below &#8230;<\/p>\n<table border=20 style=width:100%;>\n<tbody>\n<tr>\n<th>Old <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html\" title='Old way'>CSS3 Animation<\/a><br \/><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html_GETME\" title='keyframes_test.html'>keyframes_test.html<\/a><\/th>\n<th>New <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.htm\" title='Click picture'>CSS3 Animation<\/a><br \/><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html-GETME\" title='keyframes_test.htm'>keyframes_test.htm<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html-GETME\" title='keyframes_test.htm'>this way<\/a>)<\/th>\n<\/tr>\n<tr>\n<td><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html\" title='Old CSS3 Animations'><\/iframe><\/td>\n<td><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.htm\" title='New CSS3 Animations'><\/iframe><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<p id='css3@rpt'>Previous relevant <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-@keyframes-rule-primer-tutorial\/'>CSS3 @keyframes Rule 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\/keyframes\/CSS3_keyframes.m4v\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS3 @keyframes Rule Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/CSS3_keyframes.jpg\" title=\"CSS3 @keyframes Rule Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS3 @keyframes Rule Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to the idea that you can use CSS (CSS3) to perform animation tasks.  One such idea is to use CSS3 @keyframes Rules on web browsers (for Internet Explorer you would need Internet Explorer 10 or above).<\/p>\n<p>As mentioned in the tutorial <a target=_blank title='WordPress CSS Change helped by Firebug Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5873'>WordPress CSS Change helped by Firebug Primer Tutorial<\/a> CSS works with static scenarios where you can define everything ahead of time, with no new dynamic resources, but the effect of animation can make it seem that dynamic things are going on, and can add great interest to your websites.   You could try your animations right in front (the distance being inversely proportional to your regard for your regal beast<i>ing<\/i>) of your cat (no cat &#8230; try origami &#8230; but the results are unpredictable).<\/p>\n<p>Useful tutorials for the contents here (thanks) were:<\/p>\n<ul>\n<li><a target=_blank title='CSS3 @keyframes Rule' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>CSS3 @keyframes Rule<\/a><\/li>\n<li><a target=_blank title='CSS Transparency Settings for All Browsers' href='http:\/\/css-tricks.com\/css-transparency-settings-for-all-broswers\/'>CSS Transparency Settings for All Browsers<\/a><\/li>\n<li><a target=_blank title='CSS Colour Gradient' href='http:\/\/stackoverflow.com\/questions\/17043479\/css-color-gradient'>CSS Colour Gradient<\/a><\/li>\n<li><a target=_blank title='Web colours' href='http:\/\/en.wikipedia.org\/wiki\/Web_colors'>Web colours<\/a><\/li>\n<\/ul>\n<p>Here is a link to some downloadable HTML programming source code which you may want to rename to <a target=_blank title='keyframes_test.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html_GETME\">keyframes_test.html<\/a><\/p>\n<p>And here is a <a target=_blank title='keyframes_test.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_test.html\">live run<\/a>.<\/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='#d5896' onclick='var dv=document.getElementById(\"d5896\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5896' 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='#d33863' onclick='var dv=document.getElementById(\"d33863\"); 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='d33863' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re extending some ideas first played with CSS3 @keyframes Rule Primer Tutorial regarding CSS3 Animations, an important topic. Now in that previous work we never used Javascript, and today, we don&#8217;t clobber that version, because that is an important consideration &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-animations-with-javascript-dom-primer-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,37],"tags":[84,126,127,281,282,354,576,652,675,997,2254,1319],"class_list":["post-33863","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-background","tag-background-image","tag-css","tag-css3","tag-dom","tag-html","tag-javascript","tag-keyframes","tag-programming","tag-rules","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33863"}],"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=33863"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33863\/revisions"}],"predecessor-version":[{"id":33871,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/33863\/revisions\/33871"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=33863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=33863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=33863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}