페이지 이력

Creazione di effetti personalizzati

Gli effetti personalizzati possono essere applicati agli elementi di script CSS creati per gli effetti animazione.

Fare clic su (Aggiungi effetto personalizz.) nella barra degli strumenti nella parte superiore della pagina di modifica di Web Author. Quando viene visualizzata la finestra popup, impostare in sequenza gli elementi seguenti, quindi creare lo script CSS.

• *Nome effetto

  Immettere il nome dello script CSS. Quando si imposta il nome dell'effetto, il campo script CSS viene attivato automaticamente e il nome dell'effetto viene utilizzato come nome della classe.

  정보
  title Nota
  Il nome dell'effetto può contenere caratteri alfanumerici e non può iniziare con un numero. Il nome dell'effetto può includere solo caratteri di sottolineatura (_) e trattini (-). Quando si seleziona Blocca, solo gli utenti con autorizzazione di blocco possono modificare ed eliminare effetti personalizzati.

• Tipo di effetto

  È possibile determinare se aggiungere effetti personalizzati in comune o se aggiungere Entrata, Evidenziazione e Uscita.

• *Script CSS

  Creare uno script CSS. Prima della creazione, immettere il Nome effetto.

  정보
  title Nota
  Lo script CSS può essere scritto solo in inglese. Quando si immette la proprietà di animazione o il relativo nome durante la creazione di uno script CSS, la parola chiave @keyframes viene aggiunta automaticamente con il nome dell'animazione. Quando si modifica il nome della proprietà di animazione nello script CSS, il nome dell'animazione della parola chiave @keyframes viene modificato automaticamente. Il nome della proprietà di animazione segue la stessa regola associata alla creazione del Nome effetto. Non è possibile utilizzare i termini "none", "unset", "initial", o "inherit".

Consiglio per la creazione di script CSS

Quando si crea lo script di animazione utilizzando @keyframe, è consigliabile utilizzare le proprietà seguenti in un dispositivo Tizen per ottenere prestazioni ottimali.

• Per la proprietà transform, è possibile eseguire la conversione di rotazione, scala, movimento e torsione.

  • Movimento: translate(x, y)
  • Scala: scale(x, y)
  • Rotazione: rotate(angle)
  • Torsione: skew(x-angle, y-angle)
• La proprietà opacity regola la trasparenza dell'elemento.

Esempio di creazione dello script CSS

Facendo riferimento all'esempio seguente, creare lo script CSS e applicare effetti personalizzati agli elementi.

Conversione del colore dell'immagine in scala dei grigi

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

Decrescente dall'alto al basso

.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; } }