1# Developing Animations 2 3 4Animations are classified into [Static Animation](#static-animation) and [Continuous Animation](#continuous-animation). 5 6 7## Static Animation 8 9The transform attributes are the core of the static animation. A static animation can transform in the following three ways and only once in each way at a time: 10 11- translate: moves a specified component horizontally or vertically. 12 13- scale: scales a specified component horizontally or vertically to the required scale. 14 15- rotate: rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point. 16 17For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example: 18 19```html 20<!-- xxx.hml --> 21<div class="container"> 22 <text class="translate">hello</text> 23 <text class="rotate">hello</text> 24 <text class="scale">hello</text> 25</div> 26``` 27 28```css 29/* xxx.css */ 30.container { 31 width: 100%; 32 flex-direction: column; 33 align-items: center; 34} 35.translate { 36 height: 150px; 37 width: 300px; 38 margin: 50px; 39 font-size: 50px; 40 background-color: #008000; 41 transform: translate(200px); 42} 43.rotate { 44 height: 150px; 45 width: 300px; 46 margin: 50px; 47 font-size: 50px; 48 background-color: #008000; 49 transform-origin: 200px 100px; 50 transform: rotate(45deg); 51} 52.scale { 53 height: 150px; 54 width: 300px; 55 margin: 50px; 56 font-size: 50px; 57 background-color: #008000; 58 transform: scaleX(1.5); 59} 60``` 61 62**Figure 1** Static animation 63 64 65 66 67## Continuous Animation 68 69The static animation has only the start and end states. To set the transition state and conversion effect, use continuous animations. 70 71The core of a continuous animation is animation attributes, which define the start and end states of the animation and the curve of time and speed. Animation attributes can implement the following effects: 72 73- **animation-name**: background color, opacity, width, height, and transformation type applied to the element after the animation is executed 74 75- **animation-delay** and **animation-duration**: element delay and duration after the animation is executed 76 77- **animation-timing-function**: speed curve of an animation, which makes the animation more fluent 78 79- **animation-iteration-count**: number of animation playback times 80 81- **animation-fill-mode**: whether to restore the initial state after the animation is executed 82 83To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in **@keyframes**, and invoke the effect through a style class in the .hml file. The following is an example for **animation-name**: 84 85```html 86<!-- xxx.hml --> 87<div class="item-container"> 88 <div class="item {{colorParam}}"> 89 <text class="txt">color</text> 90 </div> 91 <div class="item {{opacityParam}}"> 92 <text class="txt">opacity</text> 93 </div> 94 <input class="button" type="button" name="" value="show" onclick="showAnimation"/> 95</div> 96``` 97 98```css 99/* xxx.css */ 100.item-container { 101 margin: 60px; 102 flex-direction: column; 103} 104.item { 105 width: 80%; 106 background-color: #f76160; 107} 108.txt { 109 text-align: center; 110 width: 200px; 111 height: 100px; 112} 113.button { 114 width: 200px; 115 margin: 10px; 116 font-size: 30px; 117 background-color: #09ba07; 118} 119.color { 120 animation-name: Color; 121 animation-duration: 8000ms; 122} 123.opacity { 124 animation-name: Opacity; 125 animation-duration: 8000ms; 126} 127@keyframes Color { 128 from { 129 background-color: #f76160; 130 } 131 to { 132 background-color: #09ba07; 133 } 134} 135@keyframes Opacity { 136 from { 137 opacity: 0.9; 138 } 139 to { 140 opacity: 0.1; 141 } 142} 143``` 144 145```js 146// xxx.js 147export default { 148 data: { 149 colorParam: '', 150 opacityParam: '', 151 }, 152 showAnimation: function () { 153 this.colorParam = ''; 154 this.opacityParam = ''; 155 this.colorParam = 'color'; 156 this.opacityParam = 'opacity'; 157 } 158} 159``` 160 161**Figure 2** Continuous animation effect 162 163 164
