Refine CSS navigation preview handling

Updated CSS rules for navigation preview states to enhance animation control.

Author: noamr

css-view-transitions-2/two-phase-transition-explainer.md

@@ -91,10 +91,21 @@ Specifically, the `addRestoreCallback` mechanism can be easily overlooked by dev
 As an alternative, proposing a declarative CSS-based solution, based on view-transition at rules and `@navigation` conditionals:
 
 ```css
-@navigation(preview) {
+@navigation(preview: active) {
   #skeleton {
     display: block;
   }
+
+  ::view-transition-group(*) {
+    animation-iteration-count: infinite;
+  }
+}
+
+@navigation(preview: exiting) {
+  ::view-transition-group(*) {
+    /* this would stop the infinite animation, letting it complete */
+    animation-iteration-count: 1;    
+  }
 }
 
 @view-transition {
@@ -104,7 +115,7 @@ As an alternative, proposing a declarative CSS-based solution, based on view-tra
 ```
 
 The "preview" animation with its attached types would start when the navigation is initiated (but not intercepted), and would defer the commit until
-it is finished. The "new" state of the animation would be controlled by style only, using the `@navigation(preview)` conditional (which can be mixed and matches with other conditionals).
+it is finished. The "new" state of the animation would be controlled by style only, using the `@navigation(preview: active)` conditional (which can be mixed and matches with other conditionals).
 
 ## Pros and cons of the different solutions