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

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

@property 简介

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

@property 语法

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

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

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

需要注意的点有：

1.@property定义的属性，必须以--开头；
2.syntax和inherits是必须的；
3.initial-value只有在syntax为通用类型时，才是可选的，否则必须指定默认值；
4.syntax的类型有：* ：长度类型，如px、em等；* ：数字类型；* ：百分比类型；* ：长度或百分比类型；* ：颜色类型；* ：图片类型；* ：URL类型；* ：整数类型；* ：角度类型；* ：时间类型；* ：分辨率类型；* ：变换函数类型；* ：自定义标识符类型；* ：变换列表类型；
5.syntax可以有多个类型，用|分隔，表示可以接受多种类型的值，如