버전 비교

이전 버전 12

changes.mady.by.user AST01

에 저장

비교대상

새 버전 13

changes.mady.by.user AST01

에 저장

키

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.
댓글: Content imported from a Scroll Translations translation file.

...

Sv translation
languageen

Creating custom effects

Custom effects can be applied to the CSS script elements created for animation effects.

정보
titleNote

For details on application of animation effects, refer to the following. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Click (Add Custom Effect) in the toolbar at the top of the Web Author editing page. When a pop-up window appears, set the following items sequentially and then create the CSS script.

  • *Effect Name

    Enter the name of the CSS script. When the effect name is set, the CSS script field is automatically activated and the effect name is used as the class name.

    정보
    titleNote
    • The effect name can have alphanumeric characters and it cannot begin with number.
    • The effect name can include only the underscore (_) and hyphen (-).
    • When Lock is checked, only the users with lock permission can edit or delete custom effects.

  • Effect Type

    You can determine whether to add custom effects in common or to add any of In, Highlight, and Out.

  • *CSS Script

    Create a CSS script. Before creation, first enter the Effect Name.

    정보
    titleNote
    • The CSS script can be written only in English.
    • When you enter the animation property or its name during creation of a CSS script, the @keyframes keyword is automatically added with the animation name. When the name of the animation property is changed in the CSS script, the animation name of the @keyframes keyword is automatically changed.
    • The name of the animation property follows the same rule as in creation of the Effect Name. Additionally, the term of “none,” “unset,” “initial,” or “inherit” cannot be used.
정보
titleNote

* is a required item.

Recommendation for CSS script creation

When creating the animation script by using @keyframe, it is recommended to use the following properties in a Tizen device for best performance.

  • For the transform property, conversion of rotation, scale, movement, and twisting is possible.

    • Move: translate(x, y)
    • Scale: scale(x, y)
    • Rotate: rotate(angle)
    • Twist: skew(x-angle, y-angle)
  • The opacity property adjusts the element’s transparency.
정보
titleNote
  • Playback may not be smooth on a Tizen device due to excessive effect.
  • In case of scale, playback may not be smooth compared to other effects.

CSS script creation example

Referencing the following example, create the CSS script and apply custom effects to elements.

Conversion of Image Color to Grayscale

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

Descending from Top to Bottom

.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; } }
Sv translation
languagefr

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.

정보
titleRemarque

Pour plus de détails sur l’application des effets d’animation, reportez-vous à ce qui suit. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Image Added

Cliquez sur Image Added(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.

    정보
    titleRemarque
    • 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.

    정보
    titleRemarque
    • 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.
정보
titleRemarque

* est un élément obligatoire.

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.
정보
titleRemarque
  • La lecture peut ne pas être fluide sur un périphérique Tizen à cause des effets excessifs.
  • Dans le cas de scale, la lecture peut ne pas être fluide par rapport aux autres effets.

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