{"id":86,"date":"2012-07-18T12:05:43","date_gmt":"2012-07-18T18:05:43","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=86"},"modified":"2014-10-31T12:05:15","modified_gmt":"2014-10-31T18:05:15","slug":"animaciones-en-css3","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/animaciones-en-css3\/","title":{"rendered":"Animaciones en CSS3"},"content":{"rendered":"<p>En CSS3 podemos crear animaciones que reemplacen a im\u00e1genes gif, elementos en Flash o de JavaScript.<\/p>\n<p>Para hacer estas animaciones, es necesario definir un conjunto <em>@keyframes<\/em>, y dentro de \u00e9l, las propiedades que ir\u00e1n cambiando gradualmente conforme avance la animaci\u00f3n.<\/p>\n<h3>Soporte de navegadores<\/h3>\n<p>Internet explorer no soporta la propiedad <em>animation<\/em> ni la regla @keyframes<br \/>\nChrome y Safari requieren el prefijo -webkit-<br \/>\nFirefox requiere el prefijo -moz-<br \/>\nOpera requiere el prefijo -o-<\/p>\n<p>Podemos declarar los <em>@keyframes<\/em> de la siguiente manera:<\/p>\n<pre class=\"prettyprint\">\r\n@-webkit-keyframes mianimacion{\r\n\tfrom {background: #F00;}\r\n\tto {background: #0F0;}\r\n}\r\n@-moz-keyframes mianimacion{\r\n\tfrom {background: #F00;}\r\n\tto {background: #0F0;}\r\n}\r\n@-o-keyframes mianimacion{\r\n\tfrom {background: #F00;}\r\n\tto {background: #0F0;}\r\n}\r\n@keyframes mianimacion{\r\n\tfrom {background: #F00;}\r\n\tto {background: #0F0;}\r\n}\r\n<\/pre>\n<p>Despu\u00e9s de definir los <em>@keyframes<\/em> es necesario ligarlos a un selector.<\/p>\n<p>Para aplicar la animaci\u00f3n a un selector, debemos definir al menos el nombre de la animaci\u00f3n que usaremos y su duraci\u00f3n.<\/p>\n<pre class=\"prettyprint\">\r\ndiv{\r\n\theight: 50px;\r\n\tmargin: 0 auto;\r\n\twidth: 50px;\r\n\t\r\n\t-webkit-animation: mianimacion 3s;\r\n\t-moz-animation: mianimacion 3s;\r\n\t-o-animation: mianimacion 3s;\r\n\tanimation: mianimacion 3s;\r\n}\r\n<\/pre>\n<p>Por defecto la duraci\u00f3n es 0, si no se especifica, la aniamci\u00f3n no tendr\u00e1 efecto.<\/p>\n<p>Otra manera de declarar los <em>@keyframes<\/em> es mediante porcentajes. El 100% es la duraci\u00f3n total de la animaci\u00f3n.<\/p>\n<pre class=\"prettyprint\">\r\n@-webkit-keyframes animacion2{\r\n\t0% {background: #F00;}\r\n\t50% {background: #00F;}\r\n\t100% {background: #0F0;}\r\n}\r\n@-moz-keyframes animacion2{\r\n\t0% {background: #F00;}\r\n\t50% {background: #00F;}\r\n\t100% {background: #0F0;}\r\n}\r\n@-o-keyframes animacion2{\r\n\t0% {background: #F00;}\r\n\t50% {background: #00F;}\r\n\t100% {background: #0F0;}\r\n}\r\n@keyframes animacion2{\r\n\t0% {background: #F00;}\r\n\t50% {background: #00F;}\r\n\t100% {background: #0F0;}\r\n}\r\n<\/pre>\n<p>Las propiedades de animaci\u00f3n son las siguientes:<\/p>\n<p><strong><em>@keyframes<\/em><\/strong> Declara los estado de animaci\u00f3n<br \/>\n<strong><em>animation<\/em><\/strong> Propiedad general para declarar todos los valores, excepto <em>animation-play-state<\/em><br \/>\n<strong><em>animation-name<\/em><\/strong> Especifica el nombre de los <em>@keyframes<\/em> a utilizar<br \/>\n<strong><em>animation-duration<\/em><\/strong> Define la duraci\u00f3n de la animaci\u00f3n<br \/>\n<strong><em>animation-timing-function<\/em><\/strong> Define el tipo de animaci\u00f3n que se ejecutar\u00e1, por defecto es <em>ease<\/em><br \/>\n<strong><em>animation-delay<\/em><\/strong> Define si habr\u00e1 un retraso para iniciar la animaci\u00f3n, es 0 por defecto.<br \/>\n<strong><em>animation-iteration-count<\/em><\/strong> Especifica el n\u00famero de veces que se ejecutar\u00e1 la animaci\u00f3n, por defecto 1 vez<br \/>\n<strong><em>animation-direction<\/em><\/strong> Define si la animaci\u00f3n se reproducir\u00e1 en reversa en ciclos alternados, por defecto es <em>normal<\/em><br \/>\n<strong><em>animation-play-state<\/em><\/strong> Especifica el estado de la animaci\u00f3n, <em>running<\/em> por defecto o paused<\/p>\n<pre class=\"prettyprint\">\r\ndiv{\r\n\tbackground: #F00;\r\n\tborder-radius:50%;\r\n\theight: 50px;\r\n\tmargin: 0 auto;\r\n\twidth: 50px;\r\n\t\r\n\tanimation-name: animacion2;\r\n\tanimation-duration: 5s;\r\n\tanimation-timing-function: linear;\r\n\tanimation-delay: 2s;\r\n\tanimation-iteration-count: infinite;\r\n\tanimation-direction: alternate;\r\n\tanimation-play-state: running;\r\n}\r\n\/* O en una s\u00f3la l\u00ednea *\/\r\ndiv{\r\n\tbackground: #F00;\r\n\tborder-radius:50%;\r\n\theight: 50px;\r\n\tmargin: 0 auto;\r\n\twidth: 50px;\r\n\t\r\n\tanimation: animacion2 5s linear 2s infinite alternate;\r\n}\r\n<\/pre>\n<p>Recuerda siempre colocar los prefijos en todas las propiedades que los necesiten.<\/p>\n<style>\n@-webkit-keyframes mianimacion{\n\t0% {background: #F00;}\n\t50% {background: #00F;}\n\t100% {background: #0F0;}\n}\n@-moz-keyframes mianimacion{\n\t0% {background: #F00;}\n\t50% {background: #00F;}\n\t100% {background: #0F0;}\n}\n@-o-keyframes mianimacion{\n\t0% {background: #F00;}\n\t50% {background: #00F;}\n\t100% {background: #0F0;}\n}\n@keyframes mianimacion{\n\t0% {background: #F00;}\n\t50% {background: #00F;}\n\t100% {background: #0F0;}\n}\n#example1{\n\tbackground: #F00;\n\tborder-radius:50%;\n\theight: 50px;\n\tmargin: 0 auto;\n\twidth: 50px;\n\t-webkit-animation: mianimacion 3s linear 2s infinite alternate;\n\t-moz-animation: mianimacion 3s linear 2s infinite alternate;\n\t-o-animation: mianimacion 3s linear 2s infinite alternate;\n\tanimation: mianimacion 3s linear 2s infinite alternate;\n}\n<\/style>\n<div id=\"example1\"><\/div>\n<p><\/p>\n<style>\n#scott{\n\t-webkit-animation-duration:1s;\n\t-webkit-animation-iteration-count:infinite;\n\t-webkit-animation-timing-function:step-start;\n\t-webkit-animation-name:scott;\n\t-moz-animation-duration:1s;\n\t-moz-animation-iteration-count:infinite;\n\t-moz-animation-timing-function:step-start;\n\t-moz-animation-name:scott;\n\tanimation-duration:1s;\n\tanimation-iteration-count:infinite;\n\tanimation-timing-function:step-start;\n\tanimation-name:scott;\n\tbackground:url(http:\/\/daimonikos.com\/images\/scott.png) 0 0;\n\theight:59px;\n\tmargin:0 auto;\n\twidth:36px;\n}\n@-webkit-keyframes scott{\n\t0%{background-position: 0 0;}\n\t12.5%{background-position: -42px 0;}\n\t25%{background-position: -85px 0;}\n\t37.5%{background-position: -128px 0;}\n\t50%{background-position: -171px 0;}\n\t62.5%{background-position: -215px 0;}\n\t75%{background-position: -258px 0;}\n\t87.5%{background-position: -301px 0;}\n\t100%{background-position: -336px 0;}\n}\n@-moz-keyframes scott{\n\t0%{background-position: 0 0;}\n\t12.5%{background-position: -42px 0;}\n\t25%{background-position: -85px 0;}\n\t37.5%{background-position: -128px 0;}\n\t50%{background-position: -171px 0;}\n\t62.5%{background-position: -215px 0;}\n\t75%{background-position: -258px 0;}\n\t87.5%{background-position: -301px 0;}\n\t100%{background-position: -336px 0;}\n}\n@keyframes scott{\n\t0%{background-position: 0 0;}\n\t12.5%{background-position: -42px 0;}\n\t25%{background-position: -85px 0;}\n\t37.5%{background-position: -128px 0;}\n\t50%{background-position: -171px 0;}\n\t62.5%{background-position: -215px 0;}\n\t75%{background-position: -258px 0;}\n\t87.5%{background-position: -301px 0;}\n\t100%{background-position: -336px 0;}\n}\n<\/style>\n<div id=\"scott\"><\/div>\n<p>En los siguientes videos podemos ver las animaciones en funcionamiento:<\/p>\n<p><iframe loading=\"lazy\" width=\"720\" height=\"480\" src=\"http:\/\/www.youtube.com\/embed\/96JARNynlew\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" width=\"720\" height=\"480\" src=\"http:\/\/www.youtube.com\/embed\/fFhw7Q1kNdw\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En CSS3 podemos crear animaciones que reemplacen a im\u00e1genes gif, elementos en Flash o de JavaScript. Para hacer estas animaciones, es necesario definir un conjunto @keyframes, y dentro de \u00e9l, las propiedades que ir\u00e1n cambiando gradualmente conforme avance la animaci\u00f3n. Soporte de navegadores Internet explorer no soporta la propiedad animation ni la regla @keyframes Chrome [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[16,17,10],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-animacion","tag-animation","tag-css3"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/178"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}