[css-image-animation] and ids to section titles

The automatic markdown converter doesn't seem to do it.

Author: frivoal

css-image-animation-1/explainer.md

@@ -34,7 +34,7 @@ Previous Version: [https://github.com/webplatformco/project-image-animation/blob
     3. [Other Alternatives](#other-alternatives)
 </details>
 
-## User Needs & Use Cases
+## User Needs & Use Cases {#user-needs--use-cases}
 Animated images (as enabled by GIF, APNG, WebP) are in common use on the web,
 for a variety of reasons, such as:
 * Purely decorative design elements
@@ -97,9 +97,9 @@ But this is not always practical:
     being able to work directly with the markup's `<img>` tags
     is far easier than trying to replace them on the fly with something else.
 
-## User Research
+## User Research {#user-research}
 
-### Developer & User Signals
+### Developer & User Signals {#developer--user-signals}
 A few examples amongst many of people asking for that type of functionality.
 * Stack overflow:
     [1](https://stackoverflow.com/questions/20644209/play-gif-on-mouseover-and-pause-gif-on-mouse-out-without-replacing-images)
@@ -113,24 +113,24 @@ A few examples amongst many of people asking for that type of functionality.
     [1](https://old.reddit.com/r/HTML/comments/3hjccx/how_can_i_animate_and_stop_gifs_with_mouse_hover/)
     [2](https://old.reddit.com/r/FirefoxCSS/comments/1523xwr/stop_animated_gifs_play_on_hoverclick/)
 
-### Current Workarounds
+### Current Workarounds {#current-workarounds}
 Numerous workarounds exist (further highlighting author/user  demand),
 all with a variety of downsides.
 See the [“Current Workarounds” section of the Images-in-video explainer](../images-in-video#user-content-current-workarounds) for a brief discussion.
 
-## Goals
+## Goals {#goals}
 * Provide declarative syntax to enable/disable animation of images
 * Handle images that are part of the content as well as decorative images
 * Enable applying different settings to different images
 * Enable simple user interactions (e.g. click to play)
 * Work with existing markup and/or without
 
-### Non-goals
+### Non-goals {#non-goals}
 * Turning animated images into fully fledged video player.
     (This [could be pursued separately](../images-in-video/README.md),
     but is not the focus of this explainer.)
 
-## Proposed Solution
+## Proposed Solution {#proposed-solution}
 
 The proposed solution is a css property to control animation of images.
 At its most basic version, it would take the following form:
@@ -176,7 +176,7 @@ all values have the same effect (i.e. none).
     the image animation plays,
     without synchronization with any other instance of the same image on the page.
 
-### Sample Code Snippets
+### Sample Code Snippets {#sample-code-snippets}
 Turn off all image animations on the page:
 ```css
 :root { image-animation: paused; }
@@ -222,7 +222,7 @@ Interesting effects can easily be achieved in combination with other CSS:
 .carousel img:snapped { image-animation: play; }
 ```
 
-### Beyond the Basics
+### Beyond the Basics {#beyond-the-basics}
 
 A key limitation of the above property is encountered
 when authors want to set up a means for users
@@ -236,7 +236,7 @@ to activate the animation.
 Two approaches are being considered to complement the basic design above.
 
 
-#### High-level Approach
+#### High-level Approach {#high-level-solution}
 
 An additional value can be added to the `image-animation` property:
 * **controlled**:
@@ -270,7 +270,7 @@ Same as above, in response to a [user request for reduced motion](https://drafts
 ```
 
 
-#### Low-level Approach
+#### Low-level Approach {#low-level-solution}
 
 The `:animated-image` pseudo-class can be introduced,
 and represents content image elements
@@ -286,9 +286,9 @@ without having to modify the DOM to add additional markup,
 an `::overlay` pseudo-element could be added to `<img>`
 enabling generated content or other effects to be easily placed over the image.
 
-### Possible Extensions
+### Possible Extensions {#possible-extensions}
 
-#### Control Over Iterations
+#### Control Over Iterations {#control-over-iterations}
 Animated image formats such as GIF, WebP, or APNG include information
 about how many times the animation is supposed to run.
 This could be made into an overridable default, with alternate possibilities being specified in CSS.
@@ -325,7 +325,7 @@ when the element is focused or hovered.
 }
 ```
 
-#### Longhands And Further Controls
+#### Longhands And Further Controls {#longhands-and-further-controls}
 The property above could be broken down into longhands
 possibly similar to those of the `animation-*` family of properties
 (`image-animation-play-state`, `image-animation-iteration-count`).
@@ -341,12 +341,12 @@ For instance,
 `loop` in `animation-iteration-count` is actually called `infinite`,
 and `once` would be `1`.
 
-#### Control Over the Paused State
+#### Control Over the Paused State {#control-over-the-paused-state}
 The `paused` value could be extended to give control over which frame of the image is displayed when it is stopped.
 
 `paused [ first | last | last-shown | <time> | <percent> | <number> ] ?`
 
-### Accessibility Considerations
+### Accessibility Considerations {#accessibility-considerations}
 * Web pages can already contain animated images,
     and appropriate `alt` text is already expected to be provided.
     ”Cartoon coyote being squashed by a falling anvil“
@@ -368,7 +368,7 @@ The `paused` value could be extended to give control over which frame of the ima
     `overflow: auto` / `scroll` makes elements focusable,
     only when there is something to scroll.
 
-### Privacy Considerations
+### Privacy Considerations {#privacy-considerations}
 With regards to decorative images,
 this property enables control over image animation cross origin,
 without leaking any information about whether the image is actually animatable or not.
@@ -409,9 +409,9 @@ We argue that this is an acceptable trade-off:
     If implemented, it means the situation would not just be analogous,
     but that whether an image is animatable would already be knowable cross-origin anyway.
 
-## Complementary Solutions
+## Complementary Solutions {#complementary-solutions}
 
-### Images in the `<video>` Element
+### Images in the `<video>` Element {#images-in-the-video-element}
 See [the explainer for “Images in `<video>`”](../images-in-video/README.md).
 
 Animated images are effectively videos without a sound track.
@@ -427,14 +427,14 @@ Pursuing both would make sense.
 
 ***…insert summary table showing overlap and differences…***
 
-### What About `<img control>`?
+### What About `<img control>`? {#what-about-img-control}
 
 ***…insert discussion of why that's not a full substitute,
 but of how both features can be made compatible with each other if that's desired…***
 
-## Rejected Alternatives
+## Rejected Alternatives {#rejected-alternatives}
 
-### Provide this as a UA Setting
+### Provide this as a UA Setting {#provide-this-as-a-ua-setting}
 Firefox's `about:config` has `image.animation_mode`,
 which can turn off all image animations,
 and Safari respects macOS's “auto-play animated images” setting (default on, can be turn off).
@@ -476,7 +476,7 @@ More interestingly, the setting could be reinterpreted in terms of the CSS prope
 }
 ```
 
-### Reuse the Existing `animation-*` Properties
+### Reuse the Existing `animation-*` Properties {#reuse-the-existing-animation--properties}
 Properties like `animation-play-state: running | paused`
 or `animation-iteration-count: infinite | <number [0,∞]>`
 have value space that are similar to what is proposed here.
@@ -505,7 +505,7 @@ If the regular `animation-*` properties cannot be made to apply by default and w
 it makes little sense to try and shoehorn image animations into them,
 even if there are similarities.
 
-### Other Alternatives
+### Other Alternatives {#other-alternatives}
 
 ***This section is a work in progress.***