{"id":566,"date":"2012-09-19T14:00:35","date_gmt":"2012-09-19T14:00:35","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=566"},"modified":"2019-04-06T04:07:39","modified_gmt":"2019-04-06T04:07:39","slug":"10-css3-transitions","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-css3-transitions\/","title":{"rendered":"10 CSS3 Transitions"},"content":{"rendered":"<p>CSS Animations first made their appearance in <a href=\"http:\/\/webkit.org\/blog\/324\/css-animation-2\/\">Surfing Safari<\/a>, the blog devoted to Apple&#8217;s Webkit browser. I had to have the most recent nightly build to see the animation, and was, of course, amazed to see <a href=\"http:\/\/webkit.org\/blog-files\/leaves\/index.html\" target=\"_blank\"> leaves fall<\/a> or <a href=\"http:\/\/webkit.org\/blog-files\/pulse.html\" target=\"_blank\">basic shape animation<\/a> (these demos only work in Webkit browsers).\n<\/p>\n<p>That was two years ago. Since then the standards compliant browsers have picked this up and it has since been submitted as a <a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/#introduction\">standard<\/a>.\n<\/p>\n<p>Since the release, the transformations have been offloaded to the computer&#8217;s graphic chip, meaning that they are smoother and faster than CPU driven animation using Javascript. <\/p>\n<style type=\"text\/css\">\n#example-1 {\nfloat: right; \nwidth: 15em; \nheight: 15em; \nbackground-color: purple; \nmargin: 0 0 10px 10px;\n}\n#example-1:hover {  \nbackground-color: blue; \n}\n<\/style>\n<h2>Transition Between Pseudo Classes<\/h2>\n<div id=\"example-1\"><\/div>\n<\/p>\n<p>Transitions describe how CSS properties can be made to change smoothly from one value to another over a given duration. By default, this duration for pseudo classes is instantaneous, as demonstrated by the change when hovering over this element. The change in appearance is the difference between the element&#8217;s description and the pseudo class :hover. It goes from <code> background: purple;<\/code> to <code> background: blue;<\/code> as soon as the mouse hovers over the element.\n<\/p>\n<p>Instead of making this change instantaneously, a transition gives this change a duration. You can see that the transition property is specified as a change in the background color, with a duration of 4 seconds. The before and after states are determined by the differences in the element&#8217;s description and the description of its hover state.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#example-2 {\r\nfloat: right; \r\nwidth: 500px; \r\nheight: 15em; \r\nmargin: 0 0 10px 10px;\r\nbackground-color: purple; \r\ntransition-property: background-color;\r\ntransition-delay: 0s;\r\ntransition-duration: 4s;\r\n}\r\n#example-2:hover {  \r\nbackground-color: blue; \r\n}<\/style><\/pre>\n<\/div>\n<div id=\"example-2\"><\/div>\n<\/p>\n<p>When you hover over the div, the transition from purple to blue takes 4 seconds. <\/p>\n<p>A good use for this transition effect is to animate the opacity between two pictures.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\ndiv.fader {\r\nwidth: 500px;\r\nmargin: 0 auto;\r\n}\r\nimg.swap1 {\r\nposition: absolute;\r\n}\r\ndiv.fader img {\r\ntransition: all 2s ease-in-out;\r\n}\r\nimg.swap1, div.fader:hover img.swap2 { \r\nopacity: 1.0; \r\n}\r\ndiv.fader:hover img.swap1, img.swap2 { \r\nopacity: 0;\r\n}<\/style><\/pre>\n<\/div>\n<div class=\"fader\">\n<img decoding=\"async\" loading=\"lazy\" class=\"swap1\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-1.jpg\" width=\"500\" height=\"333\" alt=\"Taiyo jumping\"\/><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"swap2\" style=\"position: relative; top: -35px; left: 7px;\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg\" width=\"500\" height=\"333\" alt=\"Taiyo in the snow\"\/>\n<\/div>\n<h2>Adjusting the Rate of Change<\/h2>\n<\/p>\n<p>The transition velocity can be controlled. In addition to the default transition timing function, there are a number of other timing functions based on 5 predefined cubic b\u00e9zier curves that control the rate of change during the transition function. Each box below has the same transformation but as you roll over the example, it demonstrates the different transition timing functions, as labeled.\n<\/p>\n<p>You can create the rate of change curve yourself by specifying the x and y coordinates of the two b\u00e9zier control handles associated with the starting and end points. In the last example, it is <code>transition-timing-function: cubic-bezier(0,1,1,0);<\/code>. An ease-in curve would be defined as cubic-bezier(0.42, 0, 1, 1); and an ease-out curve would be defined as cubic-bezier(0, 0, 0.58, 1), the first brings the curve down while the second pushes it over the linear progression of (0, 0, 1, 1). You can try this yourself by changing the numbers below and hovering over the demo above:<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#cubic-bezier {\r\ntransition-timing-function: cubic-bezier(.5,1.5,.5,-0.5); \r\n}<\/style><\/pre>\n<\/div>\n<style type=\"text\/css\">\n<p>#stable {\n    padding: 0.5em 0;\n    border: 1px solid #ccc;\n    border-left: 1em solid green;\n    border-right: 1em solid #006;\n    background-color: #eee;\n  }\n#stable .showbox {\n    margin: 1em;\n    width: 110px;\n    height: 40px;\n    border: 2px solid;\n    border-color: green;\n    background-color: #cfc;\n    line-height: 40px;\n    text-align: center;\n    transition-duration: 2s;\n  }\n#stable:hover .showbox {\n    border-color: #006;\n    background-color: #ccf;\n    border-radius: 1.5em;\n    border-radius: 1.5em;\n    transform: translate(490px,0) rotate(5deg) skew(-15deg,0);\n}<\/p>\n<\/style>\n<div id=\"stable\">\n<div class=\"showbox\">default &raquo;\n<\/div>\n<div class=\"showbox\" style=\"transition-timing-function: linear; \">linear &raquo;\n<\/div>\n<div class=\"showbox\" style=\"transition-timing-function: ease-in;\">ease-in &raquo;\n<\/div>\n<div class=\"showbox\" style=\"transition-timing-function: ease-out;;\">ease-out &raquo;\n<\/div>\n<div class=\"showbox\" style=\"transition-timing-function: ease-in-out;\">ease-in-out &raquo;\n<\/div>\n<div class=\"showbox\" id=\"cubic-bezier\">cubic-bezier &raquo;\n<\/div>\n<\/div>\n<p>This injects a bit of AfterEffects into web presentations, though it is much more limited in scope. There is much more promise of that with <a href=\"10-animation\/\">CSS3 animations<\/a>.<\/p>\n<h2>What Attributes can be changed?<\/h2>\n<\/p>\n<p>The W3 has the following <a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/#properties-from-css-\">list of properties<\/a> that can be changed in a transition. <\/p>\n<p>Some of them are:<\/p>\n<ul>\n<li>background-color, image and position\n<\/li>\n<li>border-color, width, length, spacing\n<\/li>\n<li>color\n<\/li>\n<li>crop\n<\/li>\n<li>height\n<\/li>\n<li>left\n<\/li>\n<li>letter-spacing\n<\/li>\n<li>line-height\n<\/li>\n<li>margin\n<\/li>\n<li>max-height\n<\/li>\n<li>max-width\n<\/li>\n<li>min-height\n<\/li>\n<li>min-width\n<\/li>\n<li>opacity\n<\/li>\n<li>outline-color, offset, width\n<\/li>\n<li>padding\n<\/li>\n<li>right\n<\/li>\n<li>text-indent, shadow\n<\/li>\n<li>top\n<\/li>\n<li>vertical-align\n<\/li>\n<li>visibility\n<\/li>\n<li>width\n<\/li>\n<li>word-spacing<br \/>\ninteger\n<\/li>\n<li>zoom\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS Animations first made their appearance in Surfing Safari, the blog devoted to Apple&#8217;s Webkit browser. I had to have the most recent nightly build to see the animation, and was, of course, amazed to see leaves fall or basic &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/10-css3-transitions\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/566"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":15,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":4667,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/566\/revisions\/4667"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}