1# JS Animation and Custom Font Styles<a name="EN-US_TOPIC_0000001126346896"></a> 2 3### Introduction<a name="section104mcpsimp"></a> 4 5This sample shows how to use animation styles, gradient styles, transition styles, and custom font styles in JavaScript. 6 71. Animation styles: translate, rotate, scale, and combined 8 92. Gradient styles: linear-gradient and repeating-linear-gradient 10 113. Transition styles: shared-element, custom, and card 12 13 14### Usage<a name="section111mcpsimp"></a> 15 16In this sample, there are four buttons on the home screen of your app. 17 18You can touch any of these buttons to access the corresponding style page and view how a style looks. For example, you can touch the Move button on the animation style page to see how a component moves with the defined settings. 19 20### Constraints<a name="section115mcpsimp"></a> 21 22This sample can only be run on mini-system devices. 23 24