Feat/property example (mdn#40607)

* Add: linear gradient example to @Property

* Add: linear gradient example to @Property

* Update files/en-us/web/css/@property/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

* Update files/en-us/web/css/@property/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

* Update files/en-us/web/css/@property/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

* Update index.md

* fix: percentage link

* linear gradient link

---------

Co-authored-by: yashrajbharticybtekk <y.bharti@cybtekk.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

Author: 3 people

files/en-us/web/css/@property/index.md

@@ -118,7 +118,7 @@ We use the two custom properties to style the items:
 }
 ```
 
-{{ EmbedLiveSample('examples', '100%', '250px') }}
+{{ EmbedLiveSample('Using `@property` to register and use a custom property', '100%', '250px') }}
 
 The two custom properties, `--item-size: 20%` and `--item-color: orange;` are set on the `container` parent, overriding the `40%` and `aqua` default values set when these custom properties were defined. The size is set to be inheritable; the color is not.
 
@@ -128,6 +128,43 @@ For item two, CSS global keywords are set for both custom properties which are v
 
 For item three, the `--item-size` value gets set to `1000px`. While `1000px` is a {{cssxref("length")}} value, the `@property` declaration requires the value be a `<percentage>`, so the declaration is not valid and is ignored, meaning the inheritable `20%` set on the parent is used. The `xyz` value is also invalid. As `registerProperty()` set `--item-color` to not be inherited, the default initial value of `aqua` is used and not the parent's `orange` value.
 
+### Animating a custom property value
+
+In this example, we define a custom property called `--progress` using `@property`: this accepts [`<percentage>`](/en-US/docs/Web/CSS/percentage) values and has an initial value of `25%`. We use `--progress` to define the position value of the color stops in a {{cssxref("linear-gradient()")}}, specifying where a green color stops, and black starts. We then animate the value of `--progress` to `100%` over 2.5 seconds, giving the effect of animating a progress bar.
+
+```html
+<div class="bar"></div>
+```
+
+```css
+@property --progress {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 25%;
+}
+
+.bar {
+  display: inline-block;
+  --progress: 25%;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(
+    to right,
+    #00d230 var(--progress),
+    #000000 var(--progress)
+  );
+  animation: progressAnimation 2.5s ease infinite;
+}
+
+@keyframes progressAnimation {
+  to {
+    --progress: 100%;
+  }
+}
+```
+
+{{ EmbedLiveSample('Animating a custom property value', '100%', '60px') }}
+
 ## Specifications
 
 {{Specifications}}