CSS3最引人注目的莫过于支持动画效果。只要预先定义好关键帧的css样式,以及动画时间,浏览器就会自动生成播放其中的每个帧。这在以往需要不少的
js代码,并且运行效率并不高。CSS3的动画效果极大程度上减轻了脚本的编写,使得开发者可以把更多的精力投入在内容上,而不是实现上。
不过就目前而言,能完全支持CSS3动画的只有webkit内核的浏览器,safari和chorme。但随着形势的发展,越来越多的浏览器会完善CSS3动画效果。因此这里就以webkit为基础,探讨动画效果的“动”字——随着时间怎样动。
你或许在想动画还能怎么动,无非就是把每个变化平摊到每个时间点上。如果真是这样,那么所有的动画都是匀速播放了,你无法控制其中的快慢,这样看起来就非常死板了。事实上,CSS3动画默认情况下就不是匀速播放的,而是有快有慢,给人一种渐变的体验。
animation-timing-function样式就是指明如何快慢。该样式的值为一条贝塞尔曲线的定义。
贝塞尔曲线就是X轴和Y轴都在0-1范围里的曲线方程,他有两个可变的参数:P1和P2,通过改变这两个点的位置,曲线的形状也相应的改变。因此也就设定
了动画每个时间点(x)上的跳帧数(y)。
animation-timing-function样式值的格式为:cubic-bezier(X1,Y1,X2,Y2)。X1,Y1就是P1的坐
标,X2,Y2就是P2。
当然为了简便使用,CSS3预先定义了5个曲线函数的常量,他们分别是:
ease 相当于cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear 相当于cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in 相当于cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out 相当于cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out 相当于cubic-bezier(0.42, 0.0, 0.58, 1.0)
ease就是默认的时间函数。而linear的的两个点正好位于原点和(1,1)点,所以是y=x的线性函数,因此播放就是匀速的效果。对于每个常量的效果如何
分享到:
相关推荐
纯css3写的动画库 motion-css,里面有代码源码 也有实例 ;
css动画 css-animation-101.pdf
clip样式实现炫酷简单CSS动画特效----RGB走马灯边框线 直接复制可用 新手练习可用
创建CSS3动画 设置@keyframes动画规则 animation应用动画规则 1 @keyframes规则规定动画的变化状态。 两个状态的效果,应用from,to,from动画开始,to动画结束 多个状态的效果,应用百分比形式,0%动画开始,100%...
NULL 博文链接:https://rainsilence.iteye.com/blog/1190204
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈 用到: margin: 100px auto; 绝对定位 position absolute; 动画animation animation: move 2s linear infinite; @keyframes move { from{ transform: rotateY(0...
动画制作2.0#CSS-----动画练习
FLAT商务宽屏响应式css3动画Bootstrap模板_漂亮 精品 粉色 红色 简洁 扁平化 官网 标准 大气 商业 宽屏 VI ui app 响应式 手机 css3 html5 动画 bootstrap 企业 整站 大图 幻灯 互联网 科技 展示 图片 设计 服务 ...
CSS3实现烟花特效-图片+css
精品Retina大图幻灯css3动画单页模板_精品 大图 幻灯 动画 单页 跳转 fixed 响应式 手机 bootstrap css3动画 html5 商务 大气 漂亮 扁平化 宽屏 报价 摄影 图片 案例 作品 设计 ui.rar
一些CSS3动画效果-元素飞入飞出、淡入淡出 、旋转、翻转、飘入、滑入滑出等等效果
html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画
CSS3动画-奔跑吧!绵羊
精品Retina大图幻灯css3动画单页模板_精品 大图 幻灯 动画 单页 跳转 fixed 响应式 手机 bootstrap css3动画 html5 商务 大气 漂亮 扁平化 宽屏 报价 摄影 图片 案例 作品 设计 ui.rar
浅黄色宽屏单页跳转css3动画bootstrap模板_浅黄色 黄色 宽屏 大图 幻灯 单页 扁平化 跳转 css3动画 简洁 简单 展示 bootstrap 响应式 手机 品牌 官网 企业 html5 服务.rar
钢铁侠--CSS3动画
FLAT商务宽屏响应式css3动画Bootstrap模板_漂亮 精品 粉色 红色 简洁 扁平化 官网 标准 大气 商业 宽屏 VI ui app 响应式 手机 css3 html5 动画 bootstrap 企业 整站 大图 幻灯 互联网 科技 展示 图片 设计 服务 ...
四个基本的CSS3动画图片,分别是图片放大特效,图片X轴翻转,Y轴翻转,Z轴旋转
CSS3边框动画
这是一个利用css3技术实现的3d旋转,很多动画效果都可以通过css3去操作,下载下来即可使用,照片换成自己的就可以,还有布局你也可以随意更改,动画的频次也可以根据需求进行更改