Creating custom effects
Custom effects can be applied to the CSS script elements created for animation effects.
Note
For details on application of animation effects, refer to the following. ▶ Applying animation effects
*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.
Note
* 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)
- Move:
- The
opacity
property adjusts the element’s transparency.
Note
- 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; } }