사용자 지정 효과 추가하기

Creating custom effects

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

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.

  Note

  • 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.

  Note

  • 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.

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.

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