CSS values syntax

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

Revision Content

{{draft()}}

Animations
Property Syntax Initial value
{{cssxref("animation")}}    
{{cssxref("animation-delay")}} <time># 0s
{{cssxref("animation-direction")}} [ normal | reverse | alternate | alternate-reverse ]# normal
{{cssxref("animation-duration")}} <time># 0s
{{cssxref("animation-fill-mode")}} [ none | forwards | backwards | both ]# none
{{cssxref("animation-iteration-count")}} [ infinite | <number> ]#</number> 1
{{cssxref("animation-name")}} [ none | IDENT ]# none
{{cssxref("animation-play-state")}} [ running | paused ] running
{{cssxref("animation-timing-function")}} <timing-function># ease
Transitions
Property Syntax Initial value
{{cssxref("transition")}}    
{{cssxref("transition-delay")}} <time># 0s
{{cssxref("transition-duration")}} <time># 0s
{{cssxref("transition-property")}} [ none | IDENT ]# none
{{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>&nbsp;</td>
      <td>&nbsp;</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>[ 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>[ 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>[ infinite | <number> ]#</number></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>[ 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>[ 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>
      <th scope="col">Property</th>
      <th scope="col">Syntax</th>
      <th scope="col">Initial value</th>
    </tr>
    <tr>
      <td>{{cssxref("transition")}}</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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-name"><code>[ none | IDENT ]#</code></td>
      <td id="initial-transition-name"><code>none</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