페이지 이력

Création d’effets personnalisés

Les effets personnalisés peuvent être appliqués aux éléments du script CSS créés pour les effets d’animation.

Cliquez sur (Ajouter un effet personnalisé) dans la barre d’outils en haut de la page d’édition de Web Author. Lorsqu’une fenêtre contextuelle apparaît, définissez les éléments suivants par séquence puis créez le script CSS.

• *Nom de l’effet

  Entrez le nom du script CSS. Lorsque le nom de l’effet est défini, le champ du script CSS est automatiquement activé et le nom de l’effet est utilisé comme nom de classe.

  정보
  title Remarque
  Le nom de l’effet peut comporter des caractères alphanumériques et ne peut pas commencer par un nombre. Le nom de l’effet ne peut inclure que le trait de soulignement (_) et le trait d’union (-). Lorsque Verrouiller est coché, seuls les utilisateurs qui disposent de l’autorisation de verrouillage peuvent effectuer des modifications ou supprimer les effets personnalisés.

• Type d’effet

  Vous pouvez déterminer d’ajouter des effets personnalisés dans commun ou dans Entrée, Mettre en valeur, et Sortie.

• *Script CSS

  Créez un script CSS. Avant la création, entrez d’abord le Nom de l’effet.

  정보
  title Remarque
  Le script CSS ne peut être écrit qu’en anglais. Lorsque vous entrez les propriétés ou le nom de l’animation pendant la création d’un script CSS, le mot clé @keyframes est automatiquement ajouté au nom de l’animation. Lorsque le nom de la propriété de l’animation est modifié dans la script CSS, le nom de l’animation du mot clé @keyframes est automatiquement modifié. Le nom de la propriété de l’animation suit la même règle que pour la création du Nom de l’effet. De plus, les termes « aucun », « non défini », « initial » ou « héritage » ne peuvent être utilisés.

Recommandation pour la création du script CSS

Lors de la création du script d’animation en utilisant @keyframe, il est recommandé d’utiliser les propriétés suivantes dans un périphérique Tizen pour une meilleure performance.

• Pour la propriété transform, la conversion de la rotation, de l’échelle, du mouvement et de la torsion est possible.

  • Mouvement : translate(x, y)
  • Échelle : scale(x, y)
  • Rotation : rotate(angle)
  • Torsion : skew(x-angle, y-angle)
• La propriété opacity ajuste la transparence de l’élément.

Création d’exemples de script CSS

En vous référant à l’exemple suivant, créez un script CSS et appliquez les effets personnalisés aux éléments.

Conversion des couleurs d’image à l’échelle de gris

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

Descente de haut en bas

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