@property自定义CSS属性，实现不一样的动画效果

@property是CSS的新特性，用于定义自定义CSS属性，并使这些属性可以在CSS中使用，当然也可以在JavaScript中使用。

@property 简介

@property允许开发者显示的定义CSS属性，这些属性允许进行类型检查，以及设置默认值，定义之后的属性，可以直接在css中使用，也可以在JavaScript中使用。

@property 语法

@property --name {syntax: <type> | <type> [ <type> ]*;inherits: true | false;initial-value: <value>;
}

@property的语法如上所示，其中：

--name：自定义属性的名称，必须以--开头；
syntax：自定义属性的类型；
inherits：是否继承父元素的属性值；
initial-value：自定义属性的默认值；

需要注意的点有：

1.@property定义的属性，必须以--开头；
2.syntax和inherits是必须的；
3.initial-value只有在syntax为通用类型时，才是可选的，否则必须指定默认值；
4.syntax的类型有：* <length>：长度类型，如px、em等；* <number>：数字类型；* <percentage>：百分比类型；* <length-percentage>：长度或百分比类型；* <color>：颜色类型；* <image>：图片类型；* <url>：URL类型；* <integer>：整数类型；* <angle>：角度类型；* <time>：时间类型；* <resolution>：分辨率类型；* <transform-function>：变换函数类型；* <custom-ident>：自定义标识符类型；* <transform-list>：变换列表类型；
5.syntax可以有多个类型，用|分隔，表示可以接受多种类型的值，如<length-percentage> | <color>表示可以接受长度或百分比类型，或者颜色类型的值；
6.syntax可以接受自定义值，例如css有很多关键字，如auto、inherit等，这些关键字可以作为<custom-ident>