CSS3動畫和文本的溢出顯示省略號

CSS3動畫知識點
目前瀏覽器都不支持 @keyframes 規則。
Firefox 支持替代的 @-moz-keyframes 規則。
Opera 支持替代的 @-o-keyframes 規則。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。
幀的動畫的語法設置
@keyframes animationname {keyframes-selector {css-styles;}}

animationname：必需。定義動畫的名稱
keyframes-selector：必需。動畫時長的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）

css-styles：必需。一個或多個合法的 CSS 樣式屬性。

例如：
.slogan{
      animation: slideUp 1s ease-in-out .2s forwards;//定義的動畫名稱
    }

@keyframes slideUp{
    0%{
        transform:translate(0,20px);opacity:0;filter:alpha(opacity=0)
    }
    100%{
        opacity:1;filter:alpha(opacity=100);transform:translate(0,0)}
        }
@-moz-keyframes slideUp{
    0%{
        transform:translate(0,20px);opacity:0;filter:alpha(opacity=0)
    }
    100%{
        opacity:1;filter:alpha(opacity=100);transform:translate(0,0)}
        }

@-webkit-keyframes slideUp{
    0%{
        transform:translate(0,20px);opacity:0;filter:alpha(opacity=0)
    }
    100%{
        opacity:1;filter:alpha(opacity=100);transform:translate(0,0)}
        }       

動畫的屬性：

animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out |
cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | 
cubic-bezier(number, number, number, number) ]*
默認值：ease

linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease： 平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) 
ease-in： 由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) 
ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0) 
ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number)： 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

infinite關鍵字，可以讓動畫無限次播放。
forwards：表示讓動畫停留在結束狀態
animation-play-state：讓動畫保持突然終止時的狀態。
animation-play-state: paused;停止
animation-play-state: running;繼續播放
alternate：是達到往返效果
如animation:mymove 5s infinite;變爲 animation:mymove 5s infinite alternate；

 如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。

實現方法：
width：500px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;//文字不換行

效果如下：
  CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略...

但是這個屬性只支持單行文本的溢出顯示省略號，如果我們要實現多行文本溢出顯示省略號呢。
接下來重點說一說多行文本溢出顯示省略號，如下。
實現方法：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3
overflow:hidden;

效果如下：

  CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略
  CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略
  CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略...