페이지 이력

Creación de efectos personalizados

Se pueden aplicar efectos personalizados a los elementos de script de CSS creados para efectos de animación.

Haga clic en (Añadir efecto personalizado) en la barra de herramientas de la parte superior de la página de edición de Web Author. Cuando aparezca una ventana emergente, establezca los siguientes elementos secuencialmente y, a continuación, cree el script de CSS.

• *Nombre del efecto

  Introduzca el nombre del script de CSS. Cuando se defina el nombre del efecto, se activará automáticamente el campo de script de CSS y se utilizará el nombre del efecto como nombre de la clase.

  정보
  title Nota
  El nombre del efecto puede tener caracteres alfanuméricos y no puede comenzar por un número. El nombre del efecto solo puede incluir el guion bajo (_) y el guion (-). Cuando se selecciona Bloquear, solo los usuarios con permiso de bloqueo pueden editar o eliminar efectos personalizados.

• Tipo de efecto

  Puede determinar si desea añadir efectos personalizados en común o añadir cualquiera de las opciones Entrada, Resaltado y Salida.

• *Script de CSS

  Cree un script de CSS. Antes de crearlo, introduzca primero el Nombre del efecto.

  정보
  title Nota
  El script de CSS solo se puede escribir en inglés. Cuando introduzca la propiedad de animación o su nombre durante la creación de un script de CSS, la palabra clave @keyframes se añadirá automáticamente con el nombre de la animación. Cuando el nombre de la propiedad de animación se cambia en el script de CSS, el nombre de animación de la palabra clave @keyframes se cambia automáticamente. El nombre de la propiedad de animación sigue la misma regla que en la creación del Nombre del efecto. Además, no se puede utilizar el término “ninguno”, “no establecido”, “inicial” ni “heredado”.

Recomendación para la creación de scripts de CSS

Al crear el script de animación mediante @keyframe, se recomienda utilizar las siguientes propiedades en un dispositivo Tizen para obtener el mejor rendimiento.

• Para la propiedad transform, es posible la conversión de giro, escala, movimiento y torsión.

  • Mover: translate(x, y)
  • Escalar: scale(x, y)
  • Girar: rotate(angle)
  • Torsionar: skew(x-angle, y-angle)
• La propiedad opacity ajusta la transparencia del elemento.

Ejemplo de creación de scripts de CSS

Haciendo referencia al siguiente ejemplo, cree el script de CSS y aplique efectos personalizados a los elementos.

Conversión de imágenes en color a escala de grises

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

Descenso de arriba a abajo

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }