Revision 313525 of CSS values syntax

  • Revision slug: CSS/CSS_values_syntax
  • Revision title: CSS values syntax
  • Revision id: 313525
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{draft()}}

Animations
Property Syntax Initial value
{{cssxref("animation")}} <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> {{cssinitial("animation-name")}} {{cssinitial("animation-duration"}} {{cssinitial("animation-timing-function")}} {{cssinitial("animation-delay")}} {{cssinitial("animation-iteration-count")}} {{cssinitial("animation-direction")}} {{cssinitial("animation-fill-mode")}}
{{cssxref("animation-delay")}} <time># 0s
{{cssxref("animation-direction")}} <single-animation-direction>#
where <single-animation-direction> = normal | reverse | alternate | alternate-reverse
normal
{{cssxref("animation-duration")}} <time># 0s
{{cssxref("animation-fill-mode")}} <single-animation-fill-mode>#
where <single-animation-fill-mode> = none | forwards | backwards | both
none
{{cssxref("animation-iteration-count")}} <single-animation-iteration-count>#
where <single-animation-iteration-count> =infinite | <number> ]#
1
{{cssxref("animation-name")}} <single-animation-name>#
where <single-animation-name> = none | IDENT
none
{{cssxref("animation-play-state")}} <single-animation-play-state>#
where <single-animation-play-state> = running | paused
running
{{cssxref("animation-timing-function")}} <timing-function># ease
Transitions
{{cssxref("transition")}} [ none | <single-transition-property> ] || <time> || <timing-function> || <time> {{cssinitial("transition-property")}} {{cssinitial("transition-duration")}} {{cssinitial("transition-timing-function")}} {{cssinitial("transition-delay")}}
{{cssxref("transition-delay")}} <time># 0s
{{cssxref("transition-duration")}} <time># 0s
{{cssxref("transition-property")}} none | <single-transition-property>#
where <single-transition-property> = all | IDENT
all
{{cssxref("transition-timing-function")}} <timing-function># ease

 

Revision Source

<p>{{draft()}}</p>
<table class="standard-table">
  <thead>
    <tr>
      <th colspan="3" scope="col">Animations</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Syntax</th>
      <th scope="col">Initial value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{cssxref("animation")}}</td>
      <td><code>&lt;single-animation-name&gt; || <span>&lt;time&gt;</span> || &lt;timing-function&gt; || <span>&lt;time&gt;</span> || &lt;single-animation-iteration-count&gt; || &lt;single-animation-direction&gt; || &lt;single-animation-fill-mode&gt;</code></td>
      <td>{{cssinitial("animation-name")}} {{cssinitial("animation-duration"}} {{cssinitial("animation-timing-function")}} {{cssinitial("animation-delay")}} {{cssinitial("animation-iteration-count")}} {{cssinitial("animation-direction")}} {{cssinitial("animation-fill-mode")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-delay")}}</td>
      <td id="syntax-animation-delay"><code>&lt;time&gt;#</code></td>
      <td id="initial-animation-delay"><code>0s</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-direction")}}</td>
      <td id="syntax-animation-direction"><code>&lt;single-animation-direction&gt;</code><code>#</code><br />
        where <code>&lt;single-animation-direction&gt; = </code><code>normal | reverse | alternate | alternate-reverse</code></td>
      <td id="initial-animation-direction"><code>normal</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-duration")}}</td>
      <td id="syntax-animation-duration"><code>&lt;time&gt;#</code></td>
      <td id="initial-animation-duration"><code>0s</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-fill-mode")}}</td>
      <td id="syntax-animation-fill-mode"><code>&lt;single-animation-fill-mode&gt;</code><code>#</code><br />
        where <code>&lt;single-animation-fill-mode&gt; = </code><code>none | forwards | backwards | both</code></td>
      <td id="initial-animation-fill-mode"><code>none</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-iteration-count")}}</td>
      <td id="syntax-animation-iteration-count"><code>&lt;single-animation-iteration-count&gt;</code><code>#</code><br />
        where <code>&lt;single-animation-iteration-count&gt; =</code><code>infinite | &lt;number&gt; ]#</code></td>
      <td id="initial-animation-iteration-count"><code>1</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-name")}}</td>
      <td id="syntax-animation-name"><code>&lt;single-animation-name&gt;</code><code>#</code><br />
        where <code>&lt;single-animation-name&gt;</code><code> = none | IDENT</code></td>
      <td id="initial-animation-name"><code>none</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-play-state")}}</td>
      <td id="syntax-animation-play-state"><code>&lt;single-animation-play-state&gt;</code><code>#</code><br />
        where <code>&lt;single-animation-play-state&gt;</code><code> = </code><code>running | paused</code></td>
      <td id="initial-animation-play-state"><code>running</code></td>
    </tr>
    <tr>
      <td>{{cssxref("animation-timing-function")}}</td>
      <td id="syntax-animation-timing-function"><code>&lt;timing-function&gt;#</code></td>
      <td id="initial-animation-timing-function"><code>ease</code></td>
    </tr>
    <tr>
      <th colspan="3" scope="col">Transitions</th>
    </tr>
    <tr>
      <td>{{cssxref("transition")}}</td>
      <td id="syntax-transition"><code>[ none | &lt;single-transition-property&gt; ] || &lt;time&gt; || &lt;timing-function&gt; || &lt;time&gt;</code></td>
      <td id="initial-transition">{{cssinitial("transition-property")}} {{cssinitial("transition-duration")}} {{cssinitial("transition-timing-function")}} {{cssinitial("transition-delay")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transition-delay")}}</td>
      <td id="syntax-transition-delay"><code>&lt;time&gt;#</code></td>
      <td id="initial-transition-delay"><code>0s</code></td>
    </tr>
    <tr>
      <td>{{cssxref("transition-duration")}}</td>
      <td id="syntax-transition-duration"><code>&lt;time&gt;#</code></td>
      <td id="initial-transition-duration"><code>0s</code></td>
    </tr>
    <tr>
      <td>{{cssxref("transition-property")}}</td>
      <td id="syntax-transition-property"><code>none | &lt;single-transition-property&gt;#</code><br />
        where <code>&lt;single-transition-property&gt; = all | IDENT </code></td>
      <td id="initial-transition-property"><code>all</code></td>
    </tr>
    <tr>
      <td>{{cssxref("transition-timing-function")}}</td>
      <td id="syntax-transition-timing-function"><code>&lt;timing-function&gt;#</code></td>
      <td id="initial-transition-timing-function"><code>ease</code></td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision