关于CSS3的animation如何根据文字的行数自动设置时间

coxhong 2014-12-05 11:54:31

今天在做一个移动端的网页，调试CSS效果时，用到animation移动效果，但是用起来比较不顺手，基本的动作设置都OK，就

是想知道有没有方法能够根据每次文字内容字数，自动适应弹出来的行数，时间百分比自动调整之类的。

目的是让看到的人能够看完整内容。然后自动收回去。一直都使不出来想要的效果，希望有大神指点一二！！！

不知道transform transition什么的会不会好用点，想不出来啊！！！！

以下是测试中很不成功的截图~~~

...全文

193 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

coxhong 2014-12-05

打赏
举报

补充下：部分CSS代码：｛ -webkit-animation: tipmsg 5s; -webkit-animation-timing-function:ease; -webkit-animation-fill-mode:forwards; } @-webkit-keyframes tipmsg{ 0%{top:-25rem;} 10%{top: 0rem;} 90%{top:0rem;} 100%{top:-25rem;} ｝不知道那个百分比那个可不可以搞成一次一行，然后自己判断文字需要转换成几行，然后每次一行一行往下弹出~~类似iPhone4以前那种有消息就从任务栏弹出来一样，不过iphone就只有1行

本套Web前端基础全家桶教程是全新录制，将前端学习的基础内容融汇为148节课，涵盖了...除此之外，课程涵盖大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。

CSS3 使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。CSS3 作为 CSS 的进阶版，拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效、多栏布局等等。CSS3 的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持 CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

前端面试大汇总 —— CSS / CSS3 篇① CSS盒子模型② CSS选择器③ 伪类与伪元素④ 选择器的优先级⑤ 可以继承的属性有哪些⑥ px / em / rem / vh / vw / %百分比⑦ display:none；visibility:hidden；opacity:0⑧ 两栏布局的实现⑨ 三栏布局的实现勤能补拙，查缺补漏！基础不牢，地动山摇！分点回答，全面细致！打好基础，打好基础！ ① CSS盒子模型当浏览器渲染进行到了“布局”步骤的时候，会把所有的元素表示作一个一个的盒子。盒子

文章目录一.css三角的做法二.溢出文字省略号显示三.css3实现过渡效果（transition）一.css三角的做法原理将盒子设置为宽高为0，border值设置，每个边就有三角的效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margi

一、对于div强制换行 1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} 2.（Firefox浏览器）white-space:normal; word-br