¿Cómo evitar que se restablezca la animación css3 cuando termine? [duplicar]
Esta pregunta ya tiene una respuesta aquí:
- Detener una animación CSS3 en el último fotograma 8 respuestas
Escribo una animación css3 y solo se realiza una vez. La animación funciona bien, pero se restablecerá cuando la animación termine. ¿Cómo puedo evitar esto, quiero mantener el resultado, en lugar de restablecer se.
$(function() {
$("#fdiv").delay(1000).addClass("go");
});
#fdiv {
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
margin-top: -5px;
left: 50%;
top: 50%;
background-color: red;
}
.go {
-webkit-animation: spinAndZoom 1s 1;
}
@-webkit-keyframes spinAndZoom {
0% {
width: 10px;
height: 10px;
margin-left: -5px;
margin-top: -5px;
-webkit-transform: rotateZ(0deg);
}
100% {
width: 400px;
height: 400px;
margin-left: -200px;
margin-top: -200px;
-webkit-transform: rotateZ(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fdiv"></div>
49
Author: Vadim Ovchinnikov, 2013-06-25
3 answers
Añadir animation-fill-mode: forwards;
A su .go
El fotograma clave final de la animación continúa aplicándose después de que se complete la iteración final de la animación.
100
Author: Eric Hotinger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 14:57:48
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 14:57:48
Agregue el siguiente estilo a su hoja de estilos:
.go {
/* Already exists */
-webkit-animation: spinAndZoom 1s 1;
/*New content */
-webkit-animation-fill-mode: forwards;
}
1
Author: maqjav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-25 12:16:44
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-25 12:16:44
Añadir animation-fill-mode: forwards;
.go {
-webkit-animation-fill-mode: forwards;
}
-2
Author: ShibinRagh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-10 12:02:14
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-10 12:02:14