CSS3新增属性----过渡、动画效果、多列

缺乏、安全感 2022-12-06 12:57 236阅读 0赞

## CSS3过渡 ##

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

*  指定要添加效果的CSS属性
 *  指定效果的持续时间。

应用于宽度属性的过渡效果，时长为2秒：

div
    {
        transition: width 2s;
    }

> 若未指定期限，transition将没有任何效果，因为默认值是0。

添加多个样式的变换效果，添加的属性由逗号分隔：

div
    {
        transition: width 2s, height 2s, transform 2s;
    }

过渡属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transition</td> 
   <td>简写属性，用于在一个属性中设置四个过渡属性。</td> 
  </tr> 
  <tr> 
   <td>transition-property</td> 
   <td>规定应用过渡的 CSS 属性的名称。</td> 
  </tr> 
  <tr> 
   <td>transition-duration</td> 
   <td>定义过渡效果花费的时间。默认是 0。</td> 
  </tr> 
  <tr> 
   <td>transition-timing-function</td> 
   <td>规定过渡效果的时间曲线。默认是 “ease”。</td> 
  </tr> 
  <tr> 
   <td>transition-delay</td> 
   <td>规定过渡效果何时开始。默认是 0。</td> 
  </tr> 
 </tbody> 
</table>

在一个例子中使用所有过渡属性：

div
    {
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;
        /*等同于transition: width 1s linear 2s;*/
    }

## CSS3动画 ##

动画是使元素从一种样式逐渐变化为另一种样式的效果。

我们可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

> 0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst
    {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }

**CSS3 @keyframes 规则**

*  @keyframes 规则是创建动画。
 *  @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
 *  当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。  
    指定至少这两个CSS3的动画属性绑定向一个选择器：

1.  规定动画的名称
2.  规定动画的时长

div
    {
        animation: myfirst 5s;
    }
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }

CSS3的动画属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@keyframes</td> 
   <td>规定动画。</td> 
  </tr> 
  <tr> 
   <td>animation</td> 
   <td>所有动画属性的简写属性。</td> 
  </tr> 
  <tr> 
   <td>animation-name</td> 
   <td>规定 @keyframes 动画的名称。</td> 
  </tr> 
  <tr> 
   <td>animation-duration</td> 
   <td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td> 
  </tr> 
  <tr> 
   <td>animation-timing-function</td> 
   <td>规定动画的速度曲线。默认是 “ease”。</td> 
  </tr> 
  <tr> 
   <td>animation-fill-mode</td> 
   <td>规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</td> 
  </tr> 
  <tr> 
   <td>animation-delay</td> 
   <td>规定动画何时开始。默认是 0。</td> 
  </tr> 
  <tr> 
   <td>animation-iteration-count</td> 
   <td>规定动画被播放的次数。默认是 1。</td> 
  </tr> 
  <tr> 
   <td>animation-direction</td> 
   <td>规定动画是否在下一周期逆向地播放。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td>animation-play-state</td> 
   <td>规定动画是否正在运行或暂停。默认是 “running”。</td> 
  </tr> 
 </tbody> 
</table>

运用myfirst动画，设置所有属性：

div{
        animation-name: myfirst;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
        /*等同于animation: myfirst 5s linear 2s infinite alternate;*/
    }

## CSS3 多列 ##

CSS3 可以将文本内容设计成像报纸一样的多列布局

CSS3 多列属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>column-count</td> 
   <td>指定元素应该被分割的列数。</td> 
  </tr> 
  <tr> 
   <td>column-fill</td> 
   <td>指定如何填充列</td> 
  </tr> 
  <tr> 
   <td>column-gap</td> 
   <td>指定列与列之间的间隙</td> 
  </tr> 
  <tr> 
   <td>column-rule</td> 
   <td>所有 column-rule-* 属性的简写</td> 
  </tr> 
  <tr> 
   <td>column-rule-color</td> 
   <td>指定两列间边框的颜色</td> 
  </tr> 
  <tr> 
   <td>column-rule-style</td> 
   <td>指定两列间边框的样式</td> 
  </tr> 
  <tr> 
   <td>column-rule-width</td> 
   <td>指定两列间边框的厚度</td> 
  </tr> 
  <tr> 
   <td>column-span</td> 
   <td>指定元素要跨越多少列</td> 
  </tr> 
  <tr> 
   <td>column-width</td> 
   <td>指定列的宽度</td> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>column-width 与 column-count 的简写属性。</td> 
  </tr> 
 </tbody> 
</table>