animación CSS consume demasiada CPU
Publicado por Christian (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:
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
0
