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) ]*默认值：easelinear： 线性过渡。等同于贝塞尔曲线(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:3overflow:hidden;效果如下：  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略...