--- url: "/es/pitchdeck/design/keyframes.md" description: "Si ninguna animación predefinida de Pitchdeck te sirve, crea la tuya con fotogramas clave y tus valores de *x*, *y*, *escala*, *rotación* y *opacidad*." --- # Crear animaciones personalizadas con fotogramas clave > Si ninguna animación predefinida de Pitchdeck te sirve, crea la tuya con fotogramas clave y tus valores de *x*, *y*, *escala*, *rotación* y *opacidad*. ## Crear una nueva animación personalizada {#creating-a-new-custom-animation} [Video](/assets/videos/pitchdeck/design/custom-animation-create.mp4) Para abrir el panel de animaciones personalizadas, haz clic en el botón **Custom Animations** de la cabecera principal de Pitchdeck (en el tamaño de ventana Small se llama **Animations**). Se abrirá el panel de animación personalizada, donde puedes empezar a añadir tu propia animación con fotogramas clave. Al abrir el panel de animaciones verás 2 fotogramas clave: el primero (0 %) y el último (100 %). Se añaden de forma predeterminada y no se pueden quitar, porque una animación con fotogramas clave necesita al menos un fotograma desde el que empezar y otro que indique dónde termina. ### Seleccionar un fotograma clave para editarlo {#selecting-a-keyframe-to-edit} Puedes pasar al instante de un fotograma clave a otro haciendo clic en él, en la fila de porcentajes de fotogramas clave de la parte superior del panel de animaciones personalizadas. Al hacer clic en un fotograma clave podrás editar sus propiedades. ### Insertar nuevos fotogramas clave {#inserting-new-keyframes} Para añadir un fotograma clave entre el inicio y el final predeterminados, introduce su porcentaje (por ejemplo, **50**) y selecciona **Insert New Keyframe**. Cada fotograma clave nuevo se crea automáticamente con las mismas propiedades que el fotograma clave seleccionado en ese momento; así puedes ajustar las propiedades a partir de otros fotogramas clave que ya hayas añadido. El nuevo fotograma clave también queda seleccionado automáticamente después de hacer clic en el botón **Insert New Keyframe**. ### Editar las propiedades de un fotograma clave {#editing-keyframe-properties} Puedes editar 5 propiedades distintas en cualquier fotograma clave de tu animación. Cualquier diferencia de propiedades entre tus fotogramas clave se anima automáticamente. Por ejemplo, si pones la escala a 2x en el fotograma clave del 0 % y a 1x en el del 100 %, se creará automáticamente una animación de "encogimiento". - La propiedad **X** anima la posición horizontal (izquierda/derecha) del elemento en píxeles. - La propiedad **Y** anima la posición vertical (arriba/abajo) del elemento en píxeles. - La propiedad **Opacity** anima el porcentaje de transparencia del elemento. - La propiedad **Rotate** anima los grados de rotación del elemento. - La propiedad **Scale** anima el tamaño del elemento. ### Copiar y pegar propiedades de fotogramas clave {#copying-and-pasting-keyframe-properties} Puedes copiar y pegar propiedades de un fotograma clave a otro: selecciona el fotograma clave cuyas propiedades quieres copiar, haz clic en el botón **Copy Properties**, selecciona el fotograma clave en el que quieres pegarlas y haz clic en el botón **Paste Properties** para pegar las propiedades copiadas en el fotograma clave seleccionado. > **Note:** **Las propiedades copiadas solo están disponibles hasta que cierras el panel.** Puedes copiar y pegar propiedades entre cualquier fotograma clave de tus animaciones mientras el panel de animaciones personalizadas esté abierto; después de cerrarlo, ya no podrás pegar las propiedades copiadas. ### Eliminar fotogramas clave {#deleting-keyframes} Para eliminar un fotograma clave, haz clic en él en la fila de porcentajes de fotogramas clave para seleccionarlo y luego haz clic en el botón **Delete Keyframe** para quitarlo de la línea de tiempo. Ten en cuenta que _no_ puedes eliminar los fotogramas clave del **0 %** ni del **100 %**, porque son fotogramas clave predeterminados necesarios para la línea de tiempo de la animación. Después de eliminar un fotograma clave, el del **0 %** vuelve a seleccionarse automáticamente como fotograma clave activo para editar. > **Warning:** **Eliminar un fotograma clave lo borra de forma permanente**. Cuando eliminas un fotograma clave, desaparece para siempre de la línea de tiempo y no puedes deshacer la eliminación. Aun así, puedes usar **Copy Properties** en un fotograma clave, eliminarlo y pegar sus propiedades en otro fotograma clave mientras sigues editando la línea de tiempo de la animación. ### Usar la vista previa en directo para ver tu animación {#using-the-live-preview-to-see-your-animation} Para ver cómo queda tu animación con los fotogramas clave y las propiedades que has cambiado, fíjate en el área **Live Preview**, que está justo al lado de las propiedades del fotograma clave y directamente debajo de la línea de tiempo de la animación. Cualquier cambio que hagas en los fotogramas clave, las propiedades o el suavizado se muestra automáticamente en la vista previa en directo. > **Note:** **Puedes ajustar la velocidad de reproducción de la vista previa en directo**. Si quieres ver cómo queda tu animación personalizada a distintas velocidades, arrastra a izquierda o derecha el control deslizante de velocidad que hay debajo de **Live Preview** para reducir o aumentar la velocidad de reproducción. ### Configurar el suavizado de la animación {#setting-the-animation-easing} Puedes elegir el tipo de suavizado que necesita tu animación con una opción del selector **Easing**. El suavizado se aplica automáticamente a toda la línea de tiempo y actualiza el área **Live Preview** para que veas cómo cambia el movimiento de tu animación con el suavizado elegido. Puedes elegir entre estas opciones de suavizado: - Ease (Default) - Linear - Ease In - Ease Out - Ease In Out ### Guardar tu nueva animación personalizada {#saving-your-new-custom-animation} Para guardar tu nueva animación, ponle un nombre en el campo de texto **New Custom Animation Name** y haz clic en **Add New Animation** > **Note:** **Las animaciones personalizadas solo se guardan y están disponibles en el _archivo de Figma actual_.** Al guardar una animación, queda disponible en cualquier _página_ de tu archivo de Figma _actual_. Sin embargo, tus animaciones guardadas _no_ aparecerán si ejecutas Pitchdeck en un archivo de Figma distinto o nuevo, porque se guardan directamente en el archivo de Figma y no se pueden transferir a otro. Tendrás que volver a crear las animaciones en cada archivo de Figma nuevo. También puedes crear una _página_ nueva en el archivo de Figma _actual_, donde seguirás teniendo disponibles las animaciones personalizadas guardadas en ese archivo. ### Usar tus animaciones personalizadas guardadas {#using-your-saved-custom-animations} Cuando hayas guardado al menos una animación personalizada, puedes usarla en tus diapositivas: selecciona una capa en la pestaña **Animations** y abre su selector de animaciones (**All effects…** o el menú **Animation**). Verás una pestaña **Custom** en el selector con todas las animaciones personalizadas que has guardado. Igual que con las demás animaciones predefinidas, también puedes aplicar tu animación personalizada a varias capas a la vez [seleccionándolas juntas](/es/pitchdeck/design/animations#select-elements) en la pestaña **Animations**. ## Actualizar tus animaciones guardadas {#updating-your-saved-animations} [Video](/assets/videos/pitchdeck/design/custom-animation-update.mp4) Para actualizar una animación personalizada que ya guardaste, elige la animación en el selector **Your Saved Animations**; se cargarán la animación guardada y sus fotogramas clave en el panel de animación personalizada. Después de elegir la animación guardada, edita los fotogramas clave y las propiedades que necesites. Cuando estés conforme con los cambios, haz clic en el botón **Update Saved Animation** para guardarlos y _sobrescribir_ los fotogramas clave anteriores de la animación. Ten en cuenta que, al actualizar una animación guardada, los fotogramas clave actualizados se aplican automáticamente a todas las capas de tus diapositivas que ya usaban esa animación personalizada. > **Tip:** **Crea una animación nueva a partir de una guardada**. Si quieres cargar una animación guardada y modificarla sin "sobrescribir" la versión guardada, puedes crear una animación nueva a partir de ella: introduce un nombre en **New Custom Animation Name** y haz clic en el botón **Add New Animation**. ## Eliminar tus animaciones guardadas {#deleting-your-saved-animations} [Video](/assets/videos/pitchdeck/design/custom-animation-delete.mp4) Para eliminar una animación, selecciona cualquier opción de **Your Saved Animations** para cargarla y luego haz clic en el botón **Delete Saved Animation** para eliminarla. > **Warning:** **Eliminar una animación guardada la borra de forma permanente y la quita de tus capas**. Cuando eliminas una animación guardada, desaparece para siempre de la lista **Your Saved Animations**. Las capas de tus diapositivas que usaban esa animación personalizada pasarán a no tener **ninguna animación** aplicada.