tmui-cli 2.0.6 → 5.3.2

package/data/uniappx/css/animation-timing-function.md

@@ -3,15 +3,15 @@
 animation-timing-function CSS 属性设置动画在每个周期的持续时间内如何进行。
 
 ### uni-app x 兼容性 
-| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
-| :- | :- | :- | :- | :- | :- |
-| x | 5.25 | x | 5.25 | x | 5.25 |
+| Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- |
+| 4.0 | x | 5.31 | x | 5.31 | x | 5.31 |
 
 ### App平台拍平（flatten）兼容性  @flatten_compatibility
 
 | Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
 | :- | :- | :- |
-| x | x | x |
+| 5.31 | 5.31 | x |
 
 ### 语法
 ```
@@ -21,12 +21,12 @@ animation-timing-function: <easing-function>#;
 ### animation-timing-function 的属性值
 | 名称 | 兼容性 | 描述 |
 | :- | :- | :- |
-| ease | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，即默认值，表示动画在中间加速，在结束时减速。。 |
-| linear | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示动画以匀速运动。 |
-| ease-in | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 等同于 cubic-bezier(0.42, 0, 1.0, 1.0)，表示动画一开始较慢，随着动画属性的变化逐渐加速，直至完成。 |
-| ease-out | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 等同于 cubic-bezier(0, 0, 0.58, 1.0)，表示动画一开始较快，随着动画的进行逐渐减速。 |
-| ease-in-out | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)，表示动画属性一开始缓慢变化，随后加速变化，最后再次减速变化。 |
-| cubic-bezier() | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。 |
+| ease |   | 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，即默认值，表示动画在中间加速，在结束时减速。。 |
+| linear |   | 等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示动画以匀速运动。 |
+| ease-in |   | 等同于 cubic-bezier(0.42, 0, 1.0, 1.0)，表示动画一开始较慢，随着动画属性的变化逐渐加速，直至完成。 |
+| ease-out |   | 等同于 cubic-bezier(0, 0, 0.58, 1.0)，表示动画一开始较快，随着动画的进行逐渐减速。 |
+| ease-in-out |   | 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)，表示动画属性一开始缓慢变化，随后加速变化，最后再次减速变化。 |
+| cubic-bezier() |   | 开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。 |
 | steps() | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下跳跃项之一：<br/>    <br/>      jump-start<br/>      <br/>        表示一个左连续函数，因此第一个跳跃发生在动画开始时。<br/>      <br/>      jump-end<br/>      <br/>        表示一个右连续函数，因此最后一个跳跃发生在动画结束时。<br/>      <br/>      jump-none<br/>      <br/>        两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。<br/>      <br/>      jump-both<br/>      <br/>        在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。<br/>      <br/>      start<br/>      <br/>        等同于 jump-start。<br/>      <br/>      end<br/>      <br/>        等同于 jump-end。<br/>      <br/>      step-start<br/>      <br/>        等同于 steps(1, jump-start)。<br/>      <br/>      step-end<br/>      <br/>        等同于 steps(1, jump-end)。 |
 | step-start | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 等同于 steps(1, jump-start)。 |
 | step-end | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 等同于 steps(1, jump-end)。 |

package/data/uniappx/css/animation.md

@@ -3,15 +3,15 @@
 CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
 
 ### uni-app x 兼容性 
-| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
-| :- | :- | :- | :- | :- | :- |
-| x | 5.25 | x | 5.25 | x | 5.25 |
+| Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- |
+| 4.0 | x | 5.31 | x | 5.31 | x | 5.31 |
 
 ### App平台拍平（flatten）兼容性  @flatten_compatibility
 
 | Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
 | :- | :- | :- |
-| x | x | x |
+| 5.31 | 5.31 | x |
 
 ### 语法
 ```
@@ -21,16 +21,557 @@ animation: <single-animation>#;
 ### animation 的属性值
 | 名称 | 兼容性 | 描述 |
 | :- | :- | :- |
-| alternate | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. |
+| alternate |   | The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. |
 | alternate-reverse | Android(Vapor) x / iOS(Vapor) x（部分支持，见上） | The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction. |
 | backwards | Android(Vapor) x / iOS(Vapor) x / HarmonyOS(Vapor) x（部分支持，见上） | The beginning property value (as defined in the first @keyframes at-rule) is applied before the animation is displayed, during the period defined by 'animation-delay'. |
 | both | Android(Vapor) x / iOS(Vapor) x / HarmonyOS(Vapor) x（部分支持，见上） | Both forwards and backwards fill modes are applied. |
-| forwards | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. |
-| infinite | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Causes the animation to repeat forever. |
-| none | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | No animation is performed |
-| normal | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Normal playback. |
+| forwards |   | The final property value (as defined in the last @keyframes at-rule) is maintained after the animation completes. |
+| infinite |   | Causes the animation to repeat forever. |
+| none |   | No animation is performed |
+| normal |   | Normal playback. |
 | reverse | Android(Vapor) x / iOS(Vapor) x（部分支持，见上） | All iterations of the animation are played in the reverse direction from the way they were specified. |
 
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/animation/animation.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/animation/animation.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/animation/animation
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/animation/animation
+
+>示例
+```vue
+<template>
+  <view class="animate-page">
+    <page-intro content="本页演示 @keyframes 与 animation：点击开始/暂停/恢复/取消动画，可点击各 view 修改宽度、高度、margin、padding 等属性动画。"></page-intro>
+    <view id="main" :class="'main-box main-animation-' + data.mainAnimationState"
+      @animationend="onMainAnimationEnd"></view>
+
+    <button @click="startAnimate">开始动画</button>
+    <button @click="pauseAnimate">暂停动画</button>
+    <button @click="resumeAnimate">恢复动画</button>
+    <button @click="cancelAnimate">取消动画</button>
+
+    <image src="/static/test-image/logo.png" id="roll"
+      :class="'roll-image roll-image-' + data.rollAnimationState"></image>
+
+    <text class="animation-label">修改宽度</text>
+    <view id="widthProperty" :class="'animation-box animation-target width-animation-' + data.widthAnimationState"
+      @click="widthProperty" @animationend="onWidthAnimationEnd"></view>
+
+    <text class="animation-label">修改高度</text>
+    <view id="height1" :class="'animation-box animation-target height-animation-' + data.heightAnimationState"
+      @click="heightProperty" @animationend="onHeightAnimationEnd"></view>
+
+    <text class="animation-label">修改margin</text>
+    <view id="marginProperty" :class="'animation-box animation-target margin-animation-' + data.marginAnimationState"
+      @click="marginProperty" @animationend="onMarginAnimationEnd"></view>
+
+    <text class="animation-label">修改padding</text>
+    <view id="paddingProperty" :class="'animation-box animation-target padding-animation-' + data.paddingAnimationState"
+      @click="paddingProperty" @animationend="onPaddingAnimationEnd">
+      <view class="padding-child"></view>
+    </view>
+
+    <text class="animation-label">修改border颜色</text>
+    <view id="borderProperty" :class="'animation-box animation-target border-box border-animation-' + data.borderAnimationState"
+      @click="borderProperty" @animationend="onBorderAnimationEnd"></view>
+
+    <text class="animation-label">修改transform</text>
+    <view id="transformProperty" :class="'animation-box animation-target transform-animation-' + data.transformAnimationState"
+      @click="transformProperty" @animationend="onTransformAnimationEnd"></view>
+
+    <text class="animation-label">修改position</text>
+    <view id="positionProperty" :class="'animation-box animation-target position-animation-' + data.positionAnimationState"
+      @click="positionProperty" @animationend="onPositionAnimationEnd"></view>
+
+    
+    <text class="animation-label">修改背景色和宽度</text>
+    <view id="backgroundAndWidthProperty"
+      :class="'animation-box animation-target background-width-animation-' + data.backgroundWidthAnimationState"
+      @click="backgroundAndWidthProperty" @animationend="onBackgroundWidthAnimationEnd"></view>
+
+    <text class="animation-label">执行的动画只有一个值1</text>
+    <view id="oneProperty1" :class="'animation-box animation-target one-property-one-animation-' + data.onePropertyOneAnimationState"
+      @click="oneProperty1" @animationend="onOnePropertyOneAnimationEnd"></view>
+
+    <text class="animation-label">执行的动画只有一个值2</text>
+    <view id="oneProperty2" :class="'animation-box animation-target one-property-two-animation-' + data.onePropertyTwoAnimationState"
+      @click="oneProperty2" @animationend="onOnePropertyTwoAnimationEnd"></view>
+    
+
+    <text class="animation-label">修改背景色和margin-left(关键帧)</text>
+    <view id="backgroundAndMarginLeftProperty"
+      :class="'animation-box animation-target background-margin-animation-' + data.backgroundMarginAnimationState"
+      @click="backgroundAndMarginLeftProperty" @animationend="onBackgroundMarginAnimationEnd"></view>
+
+    <text class="animation-label">修改背景色和transform(关键帧)</text>
+    <view id="backgroundAndTransformProperty"
+      :class="'animation-box animation-target background-transform-animation-' + data.backgroundTransformAnimationState"
+      @click="backgroundAndTransformProperty" @animationend="onBackgroundTransformAnimationEnd"></view>
+
+    <text class="animation-label">修改背景色(关键帧)</text>
+    <view id="backgroundProperty" :class="'animation-box animation-target background-animation-' + data.backgroundAnimationState"
+      @click="backgroundProperty" @animationend="onBackgroundAnimationEnd"></view>
+
+    <text class="animation-label">修改opacity(关键帧)</text>
+    <view id="opacityProperty" :class="'animation-box animation-target opacity-animation-' + data.opacityAnimationState"
+      @click="opacityProperty" @animationend="onOpacityAnimationEnd"></view>
+
+    <text class="animation-label">修改border-color和margin-left(关键帧)</text>
+    <view id="borderColorMarginLeftProperty"
+      :class="'animation-box animation-target border-margin-box border-margin-animation-' + data.borderMarginAnimationState"
+      @click="borderColorMarginLeftProperty" @animationend="onBorderMarginAnimationEnd"></view>
+
+    <text class="css-test-label">CSS 变量</text>
+    <view id="cssVariableProperty" :class="'css-variable-box css-test-target css-variable-animation-' + data.cssVariableAnimationState"
+      @click="cssVariableProperty" @animationend="onCssVariableAnimationEnd"></view>
+
+    
+    <text class="css-test-label">calc() 计算宽度</text>
+    <view id="calcProperty" :class="'calc-box css-test-target calc-animation-' + data.calcAnimationState"
+      @click="calcProperty" @animationend="onCalcAnimationEnd"></view>
+    
+  </view>
+</template>
+
+<style>
+  .animate-page {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-box {
+    width: 100px;
+    height: 100px;
+    background-color: brown;
+    transform: scale(1);
+  }
+
+  .css-test-label {
+    margin: 4px 4px 0;
+    padding: 8px 8px 0;
+    border-style: solid;
+    border-width: 1px 1px 0;
+    background-color: var(--animation-panel-color, #eeeeee);
+    color: var(--animation-text-color, #333333);
+    border-color: var(--border-color, #eeeeee);
+  }
+
+  .css-test-target {
+    margin: 0 4px 4px;
+    border-style: solid;
+    border-width: 0 1px 1px;
+    border-color: var(--border-color, #eeeeee);
+  }
+
+  .css-variable-box {
+    --animation-mid-size: 140px;
+    --animation-mid-color: #38bdf8;
+    --animation-mid-translate-x: 32px;
+    width: 80px;
+    height: 80px;
+    background-color: #0ea5e9;
+  }
+
+  .css-variable-animation-running {
+    animation: css-variable-animation 1s ease-in-out 1;
+  }
+
+  .css-variable-animation-finished {
+    width: 120px;
+    height: 120px;
+    background-color: #0284c7;
+    transform: translateX(0px);
+  }
+
+  /* #ifdef uniVersion >= 5.27 */
+  .calc-box {
+    width: calc(100% - 32px);
+    height: 48px;
+    background-color: #f97316;
+  }
+
+  .calc-animation-running {
+    animation: calc-animation 1s ease-in-out 1;
+  }
+
+  .calc-animation-finished {
+    width: calc(100% - 80px);
+    background-color: #ea580c;
+  }
+  /* #endif */
+
+  .main-animation-running,
+  .main-animation-paused {
+    animation: main-scale 5s linear 1;
+  }
+
+  .main-animation-paused {
+    animation-play-state: paused;
+  }
+
+  .roll-image {
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+    animation: roll-logo 2s ease-in-out infinite alternate;
+  }
+
+  .roll-image-stopped {
+    animation: none;
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  .animation-label {
+    margin: 4px 4px 0;
+    padding: 4px 4px 0;
+    border-style: solid;
+    border-width: 1px 1px 0;
+    background-color: var(--list-background-color, #eeeeee);
+    border-color: var(--border-color, #eeeeee);
+    color: var(--text-color, #333333);
+  }
+
+  .animation-target {
+    margin: 0 4px 4px;
+    border-style: solid;
+    border-width: 0 1px 1px;
+    border-color: var(--border-color, #eeeeee);
+  }
+
+  .animation-box {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    background-color: brown;
+  }
+
+  .padding-child {
+    width: 50px;
+    height: 50px;
+    background-color: black;
+  }
+
+  .border-box {
+    border-width: 10px;
+    border-color: black;
+    border-style: solid;
+  }
+
+  .border-margin-box {
+    border-width: 5px;
+    border-color: black;
+    border-style: solid;
+  }
+
+  .width-animation-running {
+    animation: change-width 1s linear 1;
+  }
+
+  .width-animation-finished {
+    width: 150px;
+  }
+
+  .height-animation-running {
+    animation: change-height 1s linear 1;
+  }
+
+  .height-animation-finished {
+    height: 200px;
+  }
+
+  .margin-animation-running {
+    animation: change-margin 1s linear 1;
+  }
+
+  .margin-animation-finished {
+    margin: 32px;
+  }
+
+  .padding-animation-running {
+    animation: change-padding 1s linear 1;
+  }
+
+  .padding-animation-finished {
+    padding: 16px;
+  }
+
+  .border-animation-running {
+    animation: change-border-color 1s linear 1;
+  }
+
+  .border-animation-finished {
+    border-color: blue;
+  }
+
+  .transform-animation-running {
+    animation: change-transform 1s linear 1;
+  }
+
+  .transform-animation-finished {
+    transform: scale(0.8) rotate(180deg);
+  }
+
+  .position-animation-running {
+    animation: change-position 1s linear 1;
+  }
+
+  .position-animation-finished {
+    left: 16px;
+  }
+
+  .background-width-animation-running {
+    animation: change-background-width 1s linear 1;
+  }
+
+  .background-width-animation-finished {
+    width: 200px;
+    background-color: blue;
+  }
+
+  .one-property-one-animation-running {
+    animation: change-one-property-one 1s linear 1;
+  }
+
+  .one-property-one-animation-finished {
+    background-color: green;
+  }
+
+  .one-property-two-animation-running {
+    animation: change-one-property-two 1s linear 1;
+  }
+
+  .one-property-two-animation-finished {
+    background-color: blue;
+  }
+
+  .background-margin-animation-running {
+    animation: change-background-margin 1s linear 1;
+  }
+
+  .background-margin-animation-finished {
+    margin-left: 30px;
+    background-color: pink;
+  }
+
+  .background-transform-animation-running {
+    animation: change-background-transform 1s linear 1;
+  }
+
+  .background-transform-animation-finished {
+    transform: translate(100px, 0px);
+    background-color: pink;
+  }
+
+  .background-animation-running {
+    animation: change-background 1s linear 1;
+  }
+
+  .background-animation-finished {
+    background-color: blue;
+  }
+
+  .opacity-animation-running {
+    animation: change-opacity 1s linear 1;
+  }
+
+  .opacity-animation-finished {
+    opacity: 0.5;
+  }
+
+  .border-margin-animation-running {
+    animation: change-border-margin 1s linear 1;
+  }
+
+  .border-margin-animation-finished {
+    margin-left: 60px;
+    border-color: yellow;
+  }
+
+  @keyframes main-scale {
+    0% {
+      transform: scale(1);
+      transform-origin: 0px 0px;
+    }
+
+    50% {
+      transform: scale(0);
+      transform-origin: 50px 50px;
+    }
+
+    100% {
+      transform: scale(1);
+      transform-origin: 100px 100px;
+    }
+  }
+
+  @keyframes css-variable-animation {
+    0% {
+      width: 80px;
+      height: 80px;
+      background-color: #0ea5e9;
+      transform: translateX(0px);
+    }
+
+    50% {
+      width: var(--animation-mid-size);
+      height: var(--animation-mid-size);
+      background-color: var(--animation-mid-color);
+      transform: translateX(var(--animation-mid-translate-x));
+    }
+
+    100% {
+      width: 120px;
+      height: 120px;
+      background-color: #0284c7;
+      transform: translateX(0px);
+    }
+  }
+
+  /* #ifdef uniVersion >= 5.27 */
+  @keyframes calc-animation {
+    0% {
+      width: calc(100% - 32px);
+    }
+
+    50% {
+      width: calc(100% - 120px);
+    }
+
+    100% {
+      width: calc(100% - 80px);
+      background-color: #ea580c;
+    }
+  }
+  /* #endif */
+
+  @keyframes roll-logo {
+    0% {
+      transform: translateX(0px) rotate(0deg);
+    }
+
+    100% {
+      transform: translateX(200px) rotate(540deg);
+    }
+  }
+
+  @keyframes change-width {
+    0% { width: 100px; }
+    50% { width: 200px; }
+    100% { width: 150px; }
+  }
+
+  @keyframes change-height {
+    0% { height: 100px; }
+    100% { height: 200px; }
+  }
+
+  @keyframes change-margin {
+    0% { margin: 8px; }
+    50% { margin: 16px; }
+    100% { margin: 32px; }
+  }
+
+  @keyframes change-padding {
+    0% { padding: 0px; }
+    33.33% { padding: 16px; }
+    66.67% { padding: 32px; }
+    100% { padding: 16px; }
+  }
+
+  @keyframes change-border-color {
+    30% { border-color: yellow; }
+    60% { border-color: pink; }
+    100% { border-color: blue; }
+  }
+
+  @keyframes change-transform {
+    0% { transform: translateX(0px) scale(1) rotate(0deg); }
+    50% { transform: translateX(100px); }
+    100% { transform: scale(0.8) rotate(180deg); }
+  }
+
+  @keyframes change-position {
+    0% { left: 0px; }
+    33.33% { left: 16px; }
+    66.67% { left: 32px; }
+    100% { left: 16px; }
+  }
+
+  @keyframes change-background-width {
+    0% {
+      width: 100px;
+      background-color: red;
+    }
+
+    50% {
+      background-color: yellow;
+    }
+
+    100% {
+      width: 200px;
+      background-color: blue;
+    }
+  }
+
+  @keyframes change-one-property-one {
+    100% { background-color: green; }
+  }
+
+  @keyframes change-one-property-two {
+    100% { background-color: blue; }
+  }
+
+  @keyframes change-background-margin {
+    20% { background-color: red; }
+    46.67% { margin-left: 10px; }
+    73.33% { margin-left: 20px; }
+    100% {
+      margin-left: 30px;
+      background-color: pink;
+    }
+  }
+
+  @keyframes change-background-transform {
+    20% { background-color: red; }
+    46.67% { transform: translate(30px, 0px); }
+    73.33% { transform: translate(50px, 0px); }
+    100% {
+      transform: translate(100px, 0px);
+      background-color: pink;
+    }
+  }
+
+  @keyframes change-background {
+    30% { background-color: yellow; }
+    60% { background-color: red; }
+    100% { background-color: blue; }
+  }
+
+  @keyframes change-opacity {
+    30% { opacity: 1; }
+    60% { opacity: 0.1; }
+    100% { opacity: 0.5; }
+  }
+
+  @keyframes change-border-margin {
+    0% {
+      border-color: red;
+      margin-left: 0px;
+    }
+
+    50% {
+      margin-left: 20px;
+    }
+
+    100% {
+      margin-left: 60px;
+      border-color: yellow;
+    }
+  }
+</style>
+
+```
+
 ### 参见
 - [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation)
 - [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation)

package/data/uniappx/css/backdrop-filter.md

@@ -27,7 +27,7 @@ backdrop-filter: none | <filter-function-list>;
 >示例
 ```vue
 <template>
-  <view class="page-root uni-theme-root">
+  <view class="page-root">
     <fps />
 
     <view class="control-panel">

package/data/uniappx/css/background-color.md

@@ -36,10 +36,7 @@ background-color: <color>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view class="uni-theme-root" style="flex: 1">
-  
-    <view class="css-page uni-theme-root" style="flex-grow: 1">
+    <view class="css-page" style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
         <text class="theme-label">background-color: blue</text>
@@ -276,9 +273,6 @@ background-color: <color>;
         <input-data :defaultValue="data.backgroundColor" title="background-color 自定义值" type="text" @confirm="inputChangeBackgroundColor"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>