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