1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
---
title: Detectar soporte de animación CSS
slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
original_slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS
---
<p>{{CSSRef}}</p>
<p>Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en <a class="external" href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">la publicación</a> de Chris Heilmann, demuestra una técnica de como hacer esto.</p>
<h2 id="Prueba_de_la_compatibilidad_de_animaciones_CSS">Prueba de la compatibilidad de animaciones CSS</h2>
<p>Este código comprueba si el soporte de animaciones CSS esta disponible:</p>
<pre class="brush: js">var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = document.createElement('div');
if( elm.style.animationName !== undefined ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
</pre>
<p>Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable <code>animation</code> a <code>false</code>. Establecemos <code>la variable animationstring</code> a <code>animation</code> la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable <code>pfx</code> a una cadena vacía.</p>
<p>Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable <code>elm</code>. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.</p>
<p>Si el navegador no soporta animaciones sin prefijos, y <code>animation</code> sigue siendo <code>false</code>, iteramos todos los posibles prefijos, ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a <code>AnimationName</code> en su lugar.</p>
<p>Una vez que el código ha terminado de ejecutarse, el valor de <em><code>animation </code></em>será <em><code>false</code> </em>si el soporte de animacion CSS no esta disponible, de otro modo será <em><code>true</code></em>. Si es <em><code>true</code> </em>tanto el nombre de las propiedad de <code>animation</code> y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será <code>MozAnimation</code> y el prefijo keyframe será <code>-moz-</code>, mientras en Chrome será <code>WebkitAnimation</code> y <code>-webkit-</code>. Tenga en cuenta que los navegadores no facilitan el cambio entre <em>camelCase </em>(Capitalizacion medial) y la<em> hyphen-ation</em> (separación).</p>
<h2 id="Animaciones_utilizando_la_sintaxis_correcta_para_diferentes_navegadores">Animaciones utilizando la sintaxis correcta para diferentes navegadores</h2>
<p>Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.</p>
<pre class="brush: js">if( animation === false ) {
// animate in JavaScript fallback
} else {
elm.style[ animationstring ] = 'rotate 1s linear infinite';
var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
'}';
if( document.styleSheets && document.styleSheets.length ) {
document.styleSheets[0].insertRule( keyframes, 0 );
} else {
var s = document.createElement( 'style' );
s.innerHTML = keyframes;
document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
}
}
</pre>
<p>Este código examina el valor de <em><code>animation</code></em>; si es <em><code>false</code></em>, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.</p>
<p>Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir <code>keyframes</code> es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).</p>
<p>Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable <code>keyframes</code>, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.</p>
<p>La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.</p>
<p>Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.</p>
<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Ver en el JSFiddle</a></p>
<h2 id="Ver_tambien">Ver tambien</h2>
<ul>
<li><a href="es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS" title="en/CSS/CSS animations">Animaciones CSS</a></li>
</ul>
|
