mozilla

Compare Revisions

CSS3

Change Revisions

Revision 290567:

Revision 290567 by teoli on

Revision 290572:

Revision 290572 by teoli on

Title:
CSS3
CSS3
Slug:
CSS/CSS3
CSS/CSS3
Tags:
css, CSS Reference
css, CSS Reference
Content:

Revision 290567
Revision 290572
nn407    <h4 id="Transitions" style="display:none;">
408      Transitions
409    </h4>
410    <table class="standard-table" style="width:100%;">
411      <tbody>
412        <tr>
413          <td style="border:solid 1px; width:30%; background-colo
 >r:rgb(255,255,220);">
414            <a class="external" href="http://dev.w3.org/csswg/css
 >3-transitions/" title="http://dev.w3.org/csswg/css3-transitions/"
 >><strong>CSS</strong> <span style="font-weight: bold;">Transition
 >s</span></a>
415          </td>
416          <td style="border:solid 1px;">
417            {{ Spec2("CSS3 Transitions") }}
418          </td>
419        </tr>
420        <tr>
421          <td colspan="2" style="border:solid 1px;">
422            Allows the definition of transitions effects between 
 >two properties values by adding the CSS {{ cssxref("transition") 
 >}}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-dur
 >ation") }}, {{ cssxref("transition-property") }}, and {{ cssxref(
 >"transition-timing-function") }} properties.
423          </td>
424        </tr>
425      </tbody>
426    </table>
427    <h4 id="Animations" style="display:none;">
428      Animations
429    </h4>
430    <table class="standard-table" style="width:100%;">
431      <tbody>
432        <tr>
433          <td style="border:solid 1px; width:30%; background-colo
 >r:rgb(255,255,220);">
434            <a class="external" href="http://dev.w3.org/csswg/css
 >3-animations/" title="http://dev.w3.org/csswg/css3-animations/"><
 >strong>CSS</strong> <span style="font-weight: bold;">Animation</s
 >pan><strong>s</strong></a>
435          </td>
436          <td style="border:solid 1px;">
437            {{ Spec2("CSS3 Animations") }}
438          </td>
439        </tr>
440        <tr>
441          <td colspan="2" style="border:solid 1px;">
442            Allows the definition of animations effects by adding
 > the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay"
 >) }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-
 >duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("
 >animation-iteration-count") }}, {{ cssxref("animation-name") }}, 
 >{{ cssxref("animation-play-state") }}, and {{ cssxref("animation-
 >timing-function") }} properties, as well as the {{ cssxref("@keyf
 >rames") }} at-rule.
443          </td>
444        </tr>
445      </tbody>
446    </table>
447    <h4 id="Transforms" style="display:none;">
448      Transforms
449    </h4>
450    <table class="standard-table" style="width:100%;">
451      <tbody>
452        <tr>
453          <td style="border:solid 1px; width:30%; background-colo
 >r:rgb(255,255,220);">
454            <a class="external" href="http://dev.w3.org/csswg/css
 >3-transforms/" title="http://dev.w3.org/csswg/css3-transforms/"><
 >strong>CSS</strong> <span style="font-weight: bold;">Transforms</
 >span></a>
455          </td>
456          <td style="border:solid 1px;">
457            {{ Spec2("CSS3 Transforms") }}
458          </td>
459        </tr>
460        <tr>
461          <td colspan="2" style="border:solid 1px;">
462            <p>
463              Adds:
464            </p>
465            <ul>
466              <li>the support of bi-dimensional transforms to be 
 >applied to any element using the CSS {{ cssxref("transform") }} a
 >nd {{ cssxref("transform-origin") }} properties. The supported tr
 >ansforms are: <code>matrix</code> <code>()</code> , <code>transla
 >te()</code> , <code>translateX()</code> , <code>translateY()</cod
 >e> , <code>scale()</code> , <code>scaleX()</code> , <code>scaleY(
 >)</code> , <code>rotate()</code> , <code>skewX()</code> , and <co
 >de>skewY()</code> .
467              </li>
468              <li>the support of tri-dimensional transforms to be
 > applied to any element by adding the CSS {{ cssxref("transform-s
 >tyle") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-
 >origin") }}, and {{ cssxref("backface-visibility") }} properties 
 >and extended the {{ cssxref("transform") }} property with the fol
 >lowing transforms are: <code>matrix</code> <code>3d()</code> , <c
 >ode>translate3d()</code> , <code>translateZ()</code> ,&nbsp; <cod
 >e>scale3d()</code> , <code>scaleZ()</code> , <code>rotate3d()</co
 >de> , <code>rotateX</code> <code>()</code> , <code>rotateY</code>
 > <code>()</code> , <code>rotateZ()</code> , and <code>perspective
 >()</code> .
469              </li>
470            </ul>
471            <p>
472              <br>
473              <em><strong>Note:</strong> this specification is a 
 >merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.
 ></em>
474            </p>
475          </td>
476        </tr>
477      </tbody>
478    </table>
479    <h4 id="Flexible_box_layout" style="display:none;">
480      Flexible box layout
481    </h4>
482    <table class="standard-table" style="width:100%;">
483      <tbody>
484        <tr>
485          <td style="border:solid 1px; width:30%; background-colo
 >r:rgb(255,255,220);">
486            <a class="external" href="http://dev.w3.org/csswg/css
 >3-flexbox/" title="http://dev.w3.org/csswg/css3-flexbox/"><strong
 >>CSS</strong> <span style="font-weight: bold;">Flexible Box Layou
 >t Module</span></a>
487          </td>
488          <td style="border:solid 1px;">
489            {{ Spec2("CSS3 Flexbox") }}
490          </td>
491        </tr>
492        <tr>
493          <td colspan="2" style="border:solid 1px;">
494            Add a flexbox layout to the CSS {{ cssxref("display")
 > }} property and several new CSS properties to control it: {{ css
 >xref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-di
 >rection") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-a
 >lign") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-orde
 >r") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }
 >}.
495          </td>
496        </tr>
497      </tbody>
498    </table>
n467    <h4 id="Transitions" style="display:none;">n
468      Transitions
469    </h4>
470    <table class="standard-table" style="width:100%;">
471      <tbody>
472        <tr>
473          <td style="border:solid 1px; width:30%; background-colo
>r:rgb(255,160,100);"> 
474            <a class="external" href="http://dev.w3.org/csswg/css
>3-transitions/" title="http://dev.w3.org/csswg/css3-transitions/" 
>><strong>CSS</strong> <span style="font-weight: bold;">Transition 
>s</span></a> 
475          </td>
476          <td style="border:solid 1px;">
477            {{ Spec2("CSS3 Transitions") }}
478          </td>
479        </tr>
480        <tr>
481          <td colspan="2" style="border:solid 1px;">
482            Allows the definition of transitions effects between 
>two properties values by adding the CSS {{ cssxref("transition")  
>}}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-dur 
>ation") }}, {{ cssxref("transition-property") }}, and {{ cssxref( 
>"transition-timing-function") }} properties. 
483          </td>
484        </tr>
485      </tbody>
486    </table>
487    <h4 id="Animations" style="display:none;">
488      Animations
489    </h4>
490    <table class="standard-table" style="width:100%;">
491      <tbody>
492        <tr>
493          <td style="border:solid 1px; width:30%; background-colo
>r:rgb(255,160,100);"> 
494            <a class="external" href="http://dev.w3.org/csswg/css
>3-animations/" title="http://dev.w3.org/csswg/css3-animations/">< 
>strong>CSS</strong> <span style="font-weight: bold;">Animation</s 
>pan><strong>s</strong></a> 
495          </td>
496          <td style="border:solid 1px;">
497            {{ Spec2("CSS3 Animations") }}
498          </td>
499        </tr>
500        <tr>
501          <td colspan="2" style="border:solid 1px;">
502            Allows the definition of animations effects by adding
> the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay" 
>) }},{{ cssxref("animation-direction") }}, {{ cssxref("animation- 
>duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref(" 
>animation-iteration-count") }}, {{ cssxref("animation-name") }},  
>{{ cssxref("animation-play-state") }}, and {{ cssxref("animation- 
>timing-function") }} properties, as well as the {{ cssxref("@keyf 
>rames") }} at-rule. 
503          </td>
504        </tr>
505      </tbody>
506    </table>
507    <h4 id="Transforms" style="display:none;">
508      Transforms
509    </h4>
510    <table class="standard-table" style="width:100%;">
511      <tbody>
512        <tr>
513          <td style="border:solid 1px; width:30%; background-colo
>r:rgb(255,160,100);"> 
514            <a class="external" href="http://dev.w3.org/csswg/css
>3-transforms/" title="http://dev.w3.org/csswg/css3-transforms/">< 
>strong>CSS</strong> <span style="font-weight: bold;">Transforms</ 
>span></a> 
515          </td>
516          <td style="border:solid 1px;">
517            {{ Spec2("CSS3 Transforms") }}
518          </td>
519        </tr>
520        <tr>
521          <td colspan="2" style="border:solid 1px;">
522            <p>
523              Adds:
524            </p>
525            <ul>
526              <li>the support of bi-dimensional transforms to be 
>applied to any element using the CSS {{ cssxref("transform") }} a 
>nd {{ cssxref("transform-origin") }} properties. The supported tr 
>ansforms are: <code>matrix</code> <code>()</code> , <code>transla 
>te()</code> , <code>translateX()</code> , <code>translateY()</cod 
>e> , <code>scale()</code> , <code>scaleX()</code> , <code>scaleY( 
>)</code> , <code>rotate()</code> , <code>skewX()</code> , and <co 
>de>skewY()</code> . 
527              </li>
528              <li>the support of tri-dimensional transforms to be
> applied to any element by adding the CSS {{ cssxref("transform-s 
>tyle") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective- 
>origin") }}, and {{ cssxref("backface-visibility") }} properties  
>and extended the {{ cssxref("transform") }} property with the fol 
>lowing transforms are: <code>matrix</code> <code>3d()</code> , <c 
>ode>translate3d()</code> , <code>translateZ()</code> ,&nbsp; <cod 
>e>scale3d()</code> , <code>scaleZ()</code> , <code>rotate3d()</co 
>de> , <code>rotateX</code> <code>()</code> , <code>rotateY</code> 
> <code>()</code> , <code>rotateZ()</code> , and <code>perspective 
>()</code> . 
529              </li>
530            </ul>
531            <p>
532              <br>
533              <em><strong>Note:</strong> this specification is a 
>merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. 
></em> 
534            </p>
535          </td>
536        </tr>
537      </tbody>
538    </table>
t576          </td>t
577        </tr>
578      </tbody>
579    </table>
580    <h4 id="Flexible_box_layout" style="display:none;">
581      Flexible box layout
582    </h4>
583    <table class="standard-table" style="width:100%;">
584      <tbody>
585        <tr>
586          <td style="border:solid 1px; width:30%; background-colo
>r:rgb(255,160,100);"> 
587            <a class="external" href="http://dev.w3.org/csswg/css
>3-flexbox/" title="http://dev.w3.org/csswg/css3-flexbox/"><strong 
>>CSS</strong> <span style="font-weight: bold;">Flexible Box Layou 
>t Module</span></a> 
588          </td>
589          <td style="border:solid 1px;">
590            {{ Spec2("CSS3 Flexbox") }}
591          </td>
592        </tr>
593        <tr>
594          <td colspan="2" style="border:solid 1px;">
595            Add a flexbox layout to the CSS {{ cssxref("display")
> }} property and several new CSS properties to control it: {{ css 
>xref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-di 
>rection") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-a 
>lign") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-orde 
>r") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") } 
>}. 

Back to History