样式 | 默认值 | 允许值 | 说明 |
基本 |
animation-type | none | none|rotate|rotate-3dx|rotate-3dy|skew|alpha|scale|translate | 动画类型。 |
animation-repeat | repeat | repeat|none | 页面过渡是否重复或仅此一次。 |
animation-start-sound | null | File path. | 动画开始时播放的音效,以"file://"开头的音频文件。 |
animation-repeat-sound | null | File path. | 动画重复时播放的音效,以"file://"开头的音频文件。 |
animation-end-sound | null | File path. | 动画结束时播放的音效,以"file://"开头的音频文件。 |
animation-post-start | end | start|end | 在页面转换动画中,postStyle指定的后页动画的开始时间是当前页动画的开始(start)或结束时间(end)。 |
animation-post-z | normal | normal|reverse | 在页面转换动画中,postStyle指定的后页动画在当前页动画的下面(normal)或上面(reverse)。 |
快捷方式 |
animation-center | 空 | 快捷方式:0%~100% | 动画的中心,是animation-center-x和animation-center-y的快捷方式,用空格分隔。 |
animation-center-x | 50% | 快捷方式:0%~100% | 动画的水平中心,一旦设置,所有动画类型的中心都被修改。 |
animation-center-y | 50% | 快捷方式:0%~100% | 动画的垂直中心,一旦设置,所有动画类型的中心都被修改。 |
animation-duration | 2000 | 快捷方式:整数 | 动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒,一旦设置,所有动画类型的持续时间都被修改。 |
animation-repeat-count | 0 | 快捷方式:整数 | 动画的重复次数,-1表示重复无限次,一旦设置,所有动画类型的重复次数都被修改。 |
animation-repeat-mode | normal | 快捷方式:normal|reverse | 动画的重复方式,正常重复或下一次次序反转,一旦设置,所有动画类型的重复方式都被修改。 |
animation-start-time | 0 | 快捷方式:int | 动画的启动时间,从现在开始的毫秒数,一旦设置,所有动画类型的启动时间都被修改。 |
旋转 |
animation-rotate | 空 | 快捷方式 | 旋转动画的起始和结束角度,是animation-rotate-from和animation-rotate-to的快捷方式,用空格分隔。 |
animation-rotate-from | 0 | -360~360 | 旋转动画的起始角度。 |
animation-rotate-to | 0 | -360~360 | 旋转动画的结束角度。 |
animation-rotate-center-x | 50% | 0%~100% | 旋转动画的水平中心。 |
animation-rotate-center-y | 50% | 0%~100% | 旋转动画的垂直中心。 |
animation-rotate-duration | 2000 | 整数 | 旋转动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-rotate-repeat-count | 0 | 整数 | 旋转动画的重复次数,-1表示重复无限次。 |
animation-rotate-repeat-mode | normal | normal|reverse | 旋转动画的重复方式,正常重复或下一次次序反转。 |
animation-rotate-start-time | 0 | int | 旋转动画的启动时间,从现在开始的毫秒数。 |
X轴3D旋转 |
animation-rotate-3dx | null | Shorcut | X轴三维旋转动画的起始和结束角度,是animation-rotate-3dx-from和animation-rotate-3dx-to的快捷方式,用空格分隔。 |
animation-rotate-3dx-from | 0 | -360~360 | X轴三维旋转动画的起始角度。 |
animation-rotate-3dx-to | 0 | -360~360 | X轴三维旋转动画的结束角度。 |
animation-rotate-3dx-depth-z | 0 | int | X轴三维旋转动画的Z轴深度。 |
animation-rotate-3dx-reverse | false | true|false | X轴三维旋转动画的时间轴方向。 |
animation-rotate-3dx-center-x | 50% | 0~100% | X轴三维旋转动画的水平中心。 |
animation-rotate-3dx-center-y | 50% | 0~100% | X轴三维旋转动画的垂直中心。 |
animation-rotate-3dx-duration | 2000 | int | X轴三维旋转动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-rotate-3dx-repeat-count | 0 | int | X轴三维旋转动画的重复次数,-1表示重复无限次。 |
animation-rotate-3dx-repeat-mode | normal | normal|reverse | X轴三维旋转动画的重复方式,正常重复或下一次次序反转。 |
animation-rotate-3dx-start-time | 0 | int | X轴三维旋转动画的启动时间,从现在开始的毫秒数。 |
Y轴3D旋转 |
animation-rotate-3dy | null | Shorcut | Y轴三维旋转动画的起始和结束角度,是animation-rotate-3dy-from和animation-rotate-3dy-to的快捷方式,用空格分隔。 |
animation-rotate-3dy-from | 0 | -360~360 | Y轴三维旋转动画的起始角度。 |
animation-rotate-3dy-to | 0 | -360~360 | Y轴三维旋转动画的结束角度。 |
animation-rotate-3dy-depth-z | 0 | int | Y轴三维旋转动画的Z轴深度。 |
animation-rotate-3dy-reverse | false | true|false | Y轴三维旋转动画的时间轴方向。 |
animation-rotate-3dy-center-x | 50% | 0~100% | Y轴三维旋转动画的水平中心。 |
animation-rotate-3dy-center-y | 50% | 0~100% | Y轴三维旋转动画的垂直中心。 |
animation-rotate-3dy-duration | 2000 | int | Y轴三维旋转动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-rotate-3dy-repeat-count | 0 | int | Y轴三维旋转动画的重复次数,-1表示重复无限次。 |
animation-rotate-3dy-repeat-mode | normal | normal|reverse | Y轴三维旋转动画的重复方式,正常重复或下一次次序反转。 |
animation-rotate-3dy-start-time | 0 | int | Y轴三维旋转动画的启动时间,从现在开始的毫秒数。 |
斜切渐变 |
animation-skew | null | Shorcut | 倾斜动画的起始和结束角度,是animation-skew-x-from,animation-skew-y-from,animation-skew-x-to和animation-skew-y-to的快捷方式,用空格分隔。 |
animation-skew-x-from | 1 | float>0 | 倾斜动画的水平方向起始位置。 |
animation-skew-x-to | 1 | float>0 | 倾斜动画的水平方向结束位置 |
animation-skew-y-from | 1 | float>0 | 倾斜动画的垂直方向起始位置 |
animation-skew-y-to | 1 | float>0 | 倾斜动画的垂直方向结束位置 |
animation-skew-depth-z | 0 | int | 倾斜动画的Z轴深度。 |
animation-skew-reverse | false | true|false | 倾斜动画的时间轴方向。 |
animation-skew-center-x | 50% | 0~100% | 倾斜动画的水平中心。 |
animation-skew-center-y | 50% | 0~100% | 倾斜动画的垂直中心。 |
animation-skew-duration | 2000 | int | 倾斜动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-skew-repeat-count | 0 | int | 倾斜动画的重复次数,-1表示重复无限次。 |
animation-skew-repeat-mode | normal | normal|reverse | 倾斜动画的重复方式,正常重复或下一次次序反转。 |
animation-skew-start-time | 0 | int | 倾斜动画的启动时间,从现在开始的毫秒数。 |
透明渐变 |
animation-alpha | 空 | 快捷方式 | 透明渐变动画的起始和结束透明度,是animation-alpha-from和animation-alpha-to的快捷方式,用空格分隔。 |
animation-alpha-from | 0 | 0~100 | 透明渐变动画的起始透明度。 |
animation-alpha-to | 0 | 0~100 | 透明渐变动画的结束透明度。 |
animation-alpha-duration | 2000 | 整数 | 透明动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-alpha-repeat-count | 0 | 整数 | 透明动画的重复次数,-1表示重复无限次。 |
animation-alpha-repeat-mode | normal | normal|reverse | 透明动画的重复方式,正常重复或下一次次序反转。 |
animation-alpha-start-time | 0 | int | 透明动画的启动时间,从现在开始的毫秒数。 |
缩放渐变 |
animation-scale | 空 | 快捷方式 | 缩放动画的起始和结束比例,是animation-scale-x-from、animation-scale-y-from、animation-scale-x-to、animation-scale-y-to的快捷方式,用空格分隔。 |
animation-scale-x-from | 1 | 正float类型 | 缩放动画的水平起始比例。 |
animation-scale-x-to | 1 | 正float类型 | 缩放动画的水平结束比例。 |
animation-scale-y-from | 1 | 正float类型 | 缩放动画的垂直起始比例。 |
animation-scale-y-to | 1 | 正float类型 | 缩放动画的垂直结束比例。 |
animation-scale-center-x | 50% | 0%~100% | 缩放动画的水平中心。 |
animation-scale-center-y | 50% | 0%~100% | 缩放动画的垂直中心。 |
animation-scale-duration | 2000 | 整数 | 缩放动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-scale-repeat-count | 0 | 整数 | 缩放动画的重复次数,-1表示重复无限次。 |
animation-scale-repeat-mode | normal | normal|reverse | 缩放动画的重复方式,正常重复或下一次次序反转。 |
animation-scale-start-time | 0 | int | 缩放动画的启动时间,从现在开始的毫秒数。 |
平移渐变 |
animation-translate | 空 | 快捷方式 | 位移动画的起始和结束位移位置,是animation-translate-x-from、animation-translate-y-from、animation-translate-x-to、animation-translate-y-to的快捷方式,用空格分隔。 |
animation-translate-x-from | 1 | 正float类型 | 位移动画的水平起始位移位置。 |
animation-translate-x-to | 1 | 正float类型 | 位移动画的水平结束位移位置。 |
animation-translate-y-from | 1 | 正float类型 | 位移动画的垂直起始位移位置。 |
animation-translate-y-to | 1 | 正float类型 | 位移动画的垂直结束位移位置。 |
animation-translate-duration | 2000 | 整数 | 位移动画的单次持续时间,实际上定义了动画的播放速度,单位为毫秒。 |
animation-translate-repeat-count | 0 | 整数 | 位移动画的重复次数,-1表示重复无限次。 |
animation-translate-repeat-mode | normal | normal|reverse | 位移动画的重复方式,正常重复或下一次次序反转。 |
animation-translate-start-time | 0 | int | 位移动画的启动时间,从现在开始的毫秒数。 |