Revision 313591 of CSS values syntax

  • Revision slug: CSS/CSS_values_syntax
  • Revision title: CSS values syntax
  • Revision id: 313591
  • 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
Transforms
{{cssxref("transform")}}  none | <transform-function>+ none
{{cssxref("transform-origin")}} [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? 50% 50%
{{cssxref("transform-style")}} flat | preserve-3d flat
{{cssxref("perspective")}} none | <length> none
{{cssxref("perspective-origin")}} [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] 50% 50%
{{cssxref("backface-visibility")}} visible | hidden visible
Color
{{cssxref("color")}} <color> Varies from one browser to another
{{cssxref("opacity")}} <number> 1.0
Colums
{{cssxref("columns")}}    
{{cssxref("column-width")}} <length> | auto auto
{{cssxref("column-count")}} <number> | auto auto
{{cssxref("column-gap")}}    
{{cssxref("column-rule")}}    
{{cssxref("column-rule-color")}}    
{{cssxref("column-rule-style")}}    
{{cssxref("column-rule-width")}}    
{{cssxref("break-before")}}    
{{cssxref("break-after")}}    
{{cssxref("break-inside")}}    
{{cssxref("column-span")}}    
{{cssxref("column-fill")}}    

 

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>
    <tr>
      <th colspan="3" scope="col">Transforms</th>
    </tr>
    <tr>
      <td>{{cssxref("transform")}}</td>
      <td id="syntax-transform"><code>&nbsp;none | &lt;transform-function&gt;+</code></td>
      <td id="initial-transform"><code>none</code></td>
    </tr>
    <tr>
      <td>{{cssxref("transform-origin")}}</td>
      <td id="syntax-transform-origin"><code>[ &lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom] | [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] &amp;&amp; [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ] ] &lt;length&gt;?</code></td>
      <td id="initial-transform-origin"><code>50% 50%</code></td>
    </tr>
    <tr>
      <td>{{cssxref("transform-style")}}</td>
      <td id="syntax-transform-style"><code>flat | preserve-3d</code></td>
      <td id="initial-transform-style"><code>flat</code></td>
    </tr>
    <tr>
      <td>{{cssxref("perspective")}}</td>
      <td id="syntax-perspective"><code>none | &lt;length&gt; </code></td>
      <td id="initial-perspective"><code>none</code></td>
    </tr>
    <tr>
      <td>{{cssxref("perspective-origin")}}</td>
      <td id="syntax-perspective-origin"><code>[ &lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom] | [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] &amp;&amp; [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ] ]</code></td>
      <td id="initial-perspective-origin"><code>50% 50%</code></td>
    </tr>
    <tr>
      <td>{{cssxref("backface-visibility")}}</td>
      <td id="syntax-backface-visibility"><code>visible | hidden</code></td>
      <td id="initial-backface-visibility"><code>visible</code></td>
    </tr>
    <tr>
      <th colspan="3" scope="col">Color</th>
    </tr>
    <tr>
      <td>{{cssxref("color")}}</td>
      <td id="syntax-color"><code>&lt;color&gt;</code></td>
      <td id="initial-color">Varies from one browser to another</td>
    </tr>
    <tr>
      <td>{{cssxref("opacity")}}</td>
      <td id="syntax-opacity"><code>&lt;number&gt;</code></td>
      <td id="initial-opacity"><code>1.0</code></td>
    </tr>
    <tr>
      <th colspan="3" scope="col">Colums</th>
    </tr>
    <tr>
      <td>{{cssxref("columns")}}</td>
      <td id="syntax-columns">&nbsp;</td>
      <td id="initial-columns">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-width")}}</td>
      <td id="syntax-column-width"><code>&lt;length&gt; | auto</code></td>
      <td id="initial-column-width"><code>auto</code></td>
    </tr>
    <tr>
      <td>{{cssxref("column-count")}}</td>
      <td id="syntax-column-count"><code>&lt;number&gt; | auto</code></td>
      <td id="initial-column-count"><code>auto</code></td>
    </tr>
    <tr>
      <td>{{cssxref("column-gap")}}</td>
      <td id="syntax-column-gap">&nbsp;</td>
      <td id="initial-column-gap">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule")}}</td>
      <td id="syntax-column-rule">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-color")}}</td>
      <td id="syntax-column-rule-color">&nbsp;</td>
      <td id="initial-column-rule-color">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-style")}}</td>
      <td id="syntax-column-rule-style">&nbsp;</td>
      <td id="initial-column-rule-style">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-width")}}</td>
      <td id="syntax-column-rule-width">&nbsp;</td>
      <td id="initial-column-rule-width">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("break-before")}}</td>
      <td id="syntax-break-before">&nbsp;</td>
      <td id="initial-break-before">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("break-after")}}</td>
      <td id="syntax-break-after">&nbsp;</td>
      <td id="initial-break-after">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("break-inside")}}</td>
      <td id="syntax-break-inside">&nbsp;</td>
      <td id="initial-break-inside">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-span")}}</td>
      <td id="syntax-column-span">&nbsp;</td>
      <td id="initial-column-span">&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("column-fill")}}</td>
      <td id="syntax-column-fill">&nbsp;</td>
      <td id="initial-column-fill">&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision