{"id":1735,"date":"2011-06-28T16:08:23","date_gmt":"2011-06-28T06:08:23","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1735"},"modified":"2011-06-30T18:25:19","modified_gmt":"2011-06-30T08:25:19","slug":"introduction-to-css3-animations-by-examples","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/","title":{"rendered":"Introduction to CSS3 Animations by Examples"},"content":{"rendered":"<p>CSS3 animations are really easy to write once you know how they work. This post will show you some very basic animations done in CSS3.  Once you get the hang of how to put them together, you will be able to do more advanced animations in CSS3 based on these examples.  Also have a look at <a href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/appleapplications\/reference\/SafariCSSRef\/Articles\/Functions.html\">Reference on Safari<\/a> for the animation properties that you can use on your CSS selectors.  <\/p>\n<p>Note: The examples on this page will only work on WebKit Browsers (eg: Chrome, Safari).   Hover over the little black elements to see the effect done in pure CSS3.  <\/p>\n<style>\n\t.css3demodiv pre, .css3demodiv .pleaseshare { width: 100%; display: block; clear: both; }\n\tul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; cursor: pointer; }\n\tul.css3demo1 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo1 li:hover {  -webkit-transform:  rotate3d(0, 0, 0, 25deg); -webkit-transform-style: preserve-3d; }\n\tul.css3demo2 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo2 li:hover { -webkit-transform:  translate3d(0, 40px, 0); }\n\tul.css3demo3 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo3 li:hover {  -webkit-transform:  scale(.5); }\t\t\n\tul.css3demo4 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo4 li:hover {  -webkit-transform:  scale(1.5); }\t\t\n\tul.css3demo5 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo5 li:hover { -webkit-transform:  translate3d(10px, 0, 0); }\n\tul.css3demo6 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); }\t\t\n\tul.css3demo7 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo7 li:hover { background: #0cf; }\t\t\n\tul.css3demo8 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo8 li:hover { -webkit-transform: scale3d(.5, 1, 1); }\t\t\n\tul.css3demo9 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo9 li:hover {  -webkit-transform: scale3d(1, 0.5, 1); }\t\t\n\tul.css3demo10 li { -webkit-transition: all 0.3s linear; }\n\tul.css3demo10 li:hover { -webkit-transform: rotate(360deg); }\t\t\n\tul.css3demo11 li { -webkit-transition: opacity 0.8s ease-in; opacity: 0.4;  }\n\tul.css3demo11 li:hover { opacity: 1; }\t\t\n\tul.css3demo12 li { -webkit-transition: opacity 1s ease-in; opacity: 1.0;  }\n\tul.css3demo12 li:hover { opacity: 0.4; }\t\t\n\tul.css3demo13 li { -webkit-transition: -webkit-transform 1s ease-in-out;   }\n\tul.css3demo13 li:hover { -webkit-animation: spin 0.3s infinite linear; }\n\t@-webkit-keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg);  }\n\t}\n\tul.css3demo14 li { -webkit-transition: -webkit-transform 5s ease-in-out;   }\n\tul.css3demo14 li:hover { -webkit-animation: colorize 3s infinite linear; }\n\t@-webkit-keyframes colorize {\n\t\t0% { background-color: #333; }\n\t\t100% { background-color: #ff0;  }\n\t}\n\tul.css3demo15 li { -webkit-transition: all 2s ease-in-out;   }\n\tul.css3demo15 li:hover { -webkit-animation: shape 1s infinite linear; }\n\t@-webkit-keyframes shape {\n\t\t100% { -webkit-border-radius: 50px;  }\n\t}\n<\/style>\n<p>Before we start, let's add the following CSS to change the look and feel of your &lt;ul&gt; list items. <\/p>\n<pre>ul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; }<\/pre>\n<p>And now let's take a look at 15 different CSS3 animations and their source code.  <\/p>\n<div class=\"css3demodiv\">\n<strong>Tilt<\/strong><\/p>\n<ul class=\"css3demo css3demo1\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo1 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo1 li:hover {  -webkit-transform:  rotate3d(0, 0, 0, 50deg); -webkit-transform-style: preserve-3d; }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Pushed Down (by 40px)<\/strong><\/p>\n<ul class=\"css3demo css3demo2\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo2 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo2 li:hover { -webkit-transform:  translate3d(0, 40px, 0); }\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Smaller<\/strong><\/p>\n<ul class=\"css3demo css3demo3\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo3 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo3 li:hover {  -webkit-transform:  scale(.5); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Bigger<\/strong><\/p>\n<ul class=\"css3demo css3demo4\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo4 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo4 li:hover {  -webkit-transform:  scale(1.5); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Slide Right (by 10px)<\/strong><\/p>\n<ul class=\"css3demo css3demo5\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo5 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo5 li:hover { -webkit-transform:  translate3d(10px, 0, 0); }\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Add Shadow<\/strong><\/p>\n<ul class=\"css3demo css3demo6\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo6 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Change Color<\/strong><\/p>\n<ul class=\"css3demo css3demo7\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo7 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo7 li:hover { background: #0cf; }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Shrink horizontally (by 50%)<\/strong><\/p>\n<ul class=\"css3demo css3demo8\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo8 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo8 li:hover { -webkit-transform: scale3d(.5, 1, 1); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Shrink vertically (by 50%)<\/strong><\/p>\n<ul class=\"css3demo css3demo9\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo9 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo9 li:hover {  -webkit-transform: scale3d(1, 0.5, 1); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Rotate 360 degree<\/strong><\/p>\n<ul class=\"css3demo css3demo10\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo10 li { -webkit-transition: all 0.3s linear; }\r\n\tul.css3demo10 li:hover { -webkit-transform: rotate(360deg); }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Fade In<\/strong><\/p>\n<ul class=\"css3demo css3demo11\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo11 li { -webkit-transition: opacity 0.8s ease-in; opacity: 0.4;  }\r\n\tul.css3demo11 li:hover { opacity: 1; }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Fade Out<\/strong><\/p>\n<ul class=\"css3demo css3demo12\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo12 li { -webkit-transition: opacity 1s ease-in; opacity: 1.0;  }\r\n\tul.css3demo12 li:hover { opacity: 0.4; }\t\t\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Spin<\/strong><\/p>\n<ul class=\"css3demo css3demo13\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo13 li { -webkit-transition: -webkit-transform 1s ease-in-out;   }\r\n\tul.css3demo13 li:hover { -webkit-animation: spin 0.3s infinite linear; }\r\n\t@-webkit-keyframes spin {\r\n\t\t0% { -webkit-transform: rotate(0deg); }\r\n\t\t100% { -webkit-transform: rotate(360deg); background-color: #ff0;  }\r\n\t}\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Fade to Color (Colorize)<\/strong><\/p>\n<ul class=\"css3demo css3demo14\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo14 li { -webkit-transition: -webkit-transform 5s ease-in-out;   }\r\n\tul.css3demo14 li:hover { -webkit-animation: colorize 3s infinite linear; }\r\n\t@-webkit-keyframes colorize {\r\n\t\t0% { background-color: #333; }\r\n\t\t100% { background-color: #ff0;  }\r\n\t}\r\n<\/pre>\n<\/div>\n<div class=\"css3demodiv\">\n<strong>Change Shape<\/strong><\/p>\n<ul class=\"css3demo css3demo15\">\n<li>A<\/li>\n<li>B<\/li>\n<li>C<\/li>\n<li>D<\/li>\n<\/ul>\n<pre>\r\n\tul.css3demo15 li { -webkit-transition: all 2s ease-in-out;   }\r\n\tul.css3demo15 li:hover { -webkit-animation: shape 1s infinite linear; }\r\n\t@-webkit-keyframes shape {\r\n\t\t100% { -webkit-border-radius: 50px;  }\r\n\t}\r\n<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS3 animations are really easy to write once you know how they work. This post<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1735","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"CSS3 animations are really easy to write once you know how they work. This post\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-28T06:08:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-06-30T08:25:19+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Introduction to CSS3 Animations by Examples\",\"datePublished\":\"2011-06-28T06:08:23+00:00\",\"dateModified\":\"2011-06-30T08:25:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\"},\"wordCount\":237,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\",\"name\":\"Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2011-06-28T06:08:23+00:00\",\"dateModified\":\"2011-06-30T08:25:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to CSS3 Animations by Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources","og_description":"CSS3 animations are really easy to write once you know how they work. This post","og_url":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2011-06-28T06:08:23+00:00","article_modified_time":"2011-06-30T08:25:19+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Introduction to CSS3 Animations by Examples","datePublished":"2011-06-28T06:08:23+00:00","dateModified":"2011-06-30T08:25:19+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/"},"wordCount":237,"commentCount":4,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/","url":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/","name":"Introduction to CSS3 Animations by Examples | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2011-06-28T06:08:23+00:00","dateModified":"2011-06-30T08:25:19+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/28\/introduction-to-css3-animations-by-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Introduction to CSS3 Animations by Examples"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1735"}],"version-history":[{"count":17,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1735\/revisions"}],"predecessor-version":[{"id":1794,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1735\/revisions\/1794"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}