CSS - animación CSS consume demasiada CPU

   
Vista:

animación CSS consume demasiada CPU

Publicado por Christian Christian.murcia@outlook.com (3 intervenciones) el 30/09/2015 14:43:53
Buen día a todos,

Quisiera realizar la siguiente consulta, y espero estar en el lugar correcto, ya que pienso que el tema puede estar fuera del alcance de este foro. Estoy tratando de diseñar una pagina que tenga imagen de fondo dinamica (que cambie cada cierto tiempo), unicamente con CSS. La animación funciona bastante bien, pero hay un problema bastante grave en cuanto al rendimiento: al abrir la página el consumo de CPU esta entre 30% y 50%, creí que el problema era por la resolución de las imagenes (1920X1080) y las reajusté (1024 x 768) sin obtener mejoría alguna. Quiero aclarar que no soy experto en diseño web, asi que cualquier ayuda es bienvenida.

De antemano agradezco su ayuda.

A continuación el código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@keyframes changebackground{
 
0% {background-image: url("images/night.jpg");background-size:cover;background-repeat:no-repeat;width:100%;}
25% {background-image: url("images/city1.jpg");background-size:cover;background-repeat:no-repeat;width:100%;}
50% {background-image: url("images/city2.jpg");background-size:cover;background-repeat:no-repeat;width:100%;}
75% {background-image: url("images/city3.jpg");background-size:cover;background-repeat:no-repeat;width:100%;}
100% {background-image: url("images/city4.jpg");background-size:cover;background-repeat:no-repeat;width:100%;}
}
 
body {
width:100%;
height:auto;
background-image: url("images/night.jpg");
background-size:cover;
background-repeat:no-repeat;
animation-name:changebackground;
animation-delay:1s;
animation-duration:40s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-timing-function:ease-in-out;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

animación CSS consume demasiada CPU

Publicado por Angel Komander (54 intervenciones) el 30/09/2015 17:26:40
amigo, podrias subir la pagina a codepen o pasar un link para bajarla y poder ayudarte mejor?
aun que claro puedes hacer que cambie el background cada cierto tiempo mediante Jquery o js ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

animación CSS consume demasiada CPU

Publicado por Christian (3 intervenciones) el 01/10/2015 03:28:12
Amigo, muchas gracias por responder, bueno, es que realmente la pagina no la tengo en ningun servicio de hosting o dominio, ya que la estoy trabajando de forma local con xampp, si de algo sirve, a continuación dejo el enlace para descargar todos los archivos y la propia página en html, aunque coincido contigo, seria mejor usar jquery o javascript.

http://1drv.ms/1WzpWPh

Gracias, y mis disculpas por la molestia.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

animación CSS consume demasiada CPU

Publicado por xve (349 intervenciones) el 30/09/2015 19:09:30
Hola Christian, la verdad es que yo lo probé hace tiempo, y decidí hacerlo con jquery tal y como te comenta Angel...

A mi modo de ver, le falta una propiedad al animation, que es tiempo entre cada iteración... es decir, si pones 2 imágenes, y indicas animation-duration:20 segundos, es el tiempo que tarda en pasar de la imagen 1 a la 2, es decir, es el tiempo en hacer una "interacion"... y a mi modo de ver, tendrias que poder indicar, el tiempo de la animación, y el tiempo entre animaciones.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

animación CSS consume demasiada CPU

Publicado por Christian (3 intervenciones) el 01/10/2015 03:33:59
Gracias por tu respuesta. Segun entiendo, y segun he ido experimentando con la animación, la propiedad animation-duration, aplicaria para el tiempo en que tarda en cambiar todas las imagenes, o no sé si hay algun modo de indicar el tiempo entre cambio de imagen. Porque si le pongo un tiempo menor, las imagenes cambian mucho mas rapido, pero como te comento, ese tiempo aplica para la duración del cambio de todas las imagenes.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar