{"id":5911,"date":"2014-01-13T05:05:12","date_gmt":"2014-01-12T18:05:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5911"},"modified":"2014-01-13T05:05:12","modified_gmt":"2014-01-12T18:05:12","slug":"css3-animation-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-animation-primer-tutorial\/","title":{"rendered":"CSS3 Animation Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_animation.m4v\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS3 Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_animation.jpg\" title=\"CSS3 Animation Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS3 Animation 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 (as for yesterday&#8217;s <a title='CSS3 @keyframes Rule Primer Tutorial' href='#ckrpt'>CSS3 @keyframes Rule Primer Tutorial<\/a> shown below) on web browsers (for Internet Explorer you would need Internet Explorer 10 or above).   Today we show a smoother animation result using the <i>&#8220;from&#8221;<\/i> and <i>&#8220;to&#8221;<\/i> syntax.<\/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.<\/p>\n<p>In addition to the links of yesterday&#8217;s tutorial the tutorial here was very useful (thanks):<\/p>\n<ul>\n<li><a target=_blank title='CSS3 Animation' href='http:\/\/www.w3schools.com\/css\/css3_animations.asp'>CSS3 Animation<\/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_animation.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_animation.html_GETME\">keyframes_animation.html<\/a><\/p>\n<p>And here is a <a target=_blank title='keyframes_animation.html' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/keyframes\/keyframes_animation.html\">live run<\/a>.<\/p>\n<hr \/>\n<p id='ckrpt'>Previous <a target=_blank title='CSS3 @keyframes Rule Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5896'>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='#d5911' onclick='var dv=document.getElementById(\"d5911\"); 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='d5911' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<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 (as for yesterday&#8217;s CSS3 @keyframes Rule Primer Tutorial shown below) on &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-animation-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":[74,281,282,675,997,1319],"class_list":["post-5911","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-anaimation","tag-css","tag-css3","tag-keyframes","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5911"}],"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=5911"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/5911\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=5911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=5911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=5911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}