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实现多行文本溢出显示省略...