El problema actual de las animaciones CSS3

El problema es que hay que usar ‘vendor specific extensions‘ (hacks como -moz- y -webkit-) repetidamente para lo mismo:

@-moz-keyframes "warncolor" {
	from {
		color: #006;
		background-color:rgba(204,0,0,0);
	}
	to {
		color: #fff;
		background-color:rgba(204,0,0,1);
	}
}
@-webkit-keyframes "warncolor" {
	from {
		color: #006;
		background-color:rgba(204,0,0,0);
	}
	to {
		color: #fff;
		background-color:rgba(204,0,0,1);
	}
}
@keyframes "warncolor" {
	from {
		color: #006;
		background-color:rgba(204,0,0,0);
	}
	to {
		color: #fff;
		background-color:rgba(204,0,0,1);
	}
}

Con esto hemos definido una animación simple. Ahora la aplicamos con un selector:

.warning {
	color:#fff; /* color si no se implementa la animación css3 */
	background-color: #c00; /* color si no se implementa la animación css3 */
	-moz-animation-name: "warncolor";
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease;
	-webkit-animation-name: "warncolor";
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease;
	animation-name: "warncolor";
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease;
}

Engorroso ¿no? pues imaginemos incluir las extensiones para opera o khtml 😦

Anuncios
  1. 3/07/14
    Trackback from : what is it worth
  2. 19/03/15
    Trackback from : webpage

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: