W3C标准中对css3transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

    

1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;

2、length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;

3、percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性;

4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;

5、number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;

6、transform list:详情请参阅:《CSS3 Transform

7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop

8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility

9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow

10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image

11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化

13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

原文http://www.w3cplus.com/content/css3-transition/

关于CSS的图像放大问题的解决,需要借助jQuery等直接用css3设置的更多相关文章

  1. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

  2. delphi 图像处理 图像放大缩小

    procedure TDR_QM_ZP_Form.btn_FDClick(Sender: TObject); //图像放大 begin my_int1 := Trunc( my_int1 * 1.1) ...

  3. [转]Raanan Fattal - Image and Video Upscaling from Local Self-Examples 图像放大

    转自:http://www.sigvc.org/bbs/thread-1032-1-1.html 论文链接:http://www.cs.huji.ac.il/~raananf/projects/lss ...

  4. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  5. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  6. 图像本地预览插件(基于JQUERY、HTML5)

    最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...

  7. less是什么?直接用css好还是less好

    问:Less是一个动态CSS语言框架,Less扩展了CSS的动态特性 [1]:从实现角度来说,直接用css看起来能方便一些,而less还要编译? [2]:技术上好像灵活,但是从使用者的角度来说,css ...

  8. [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换

    [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. python(4)–yield实现异步

    首先我们假设一个情景:一个人做包子,一次只能做一个:来了两个吃包子的,做包子做好了包子依次分给两个吃包子的. 先上代码: import time ''' 一个做包子吃包子模型,一个做包子的,两个吃包子 ...

  2. Halcon C++混合编程学习之Qt 实现检测焊接点

    1 # include "HalconCpp.h" # include "HDevThread.h" # include <X11/Xlib.h> ...

  3. postgresql常用SQL

    --查看数据库 select * from pg_database; --查看表空间 select * from pg_tablespace; --查看语言 select * from pg_lang ...

  4. [改善Java代码]适时选择不同的线程池来实现

    Java的线程池实现从最根本上来说只有两个:ThreadPoolExecutor类和ScheduledThreadPoolExecutor类,这两个类还是父子关系,但是Java为了简化并行计算,还提供 ...

  5. 神奇的CSS3选择器

    话说园子里也混迹多年了,但是基本没写过blog,写点基础的,那就从css3选择器开始吧. Css3选择器 先说下,为什么提倡使用选择器. 使用选择器可以将样式与元素直接绑定起来,在样式表中什么样式与什 ...

  6. Git CMD - branch: List, create, or delete branches

    命令格式 git branch [--color[=<when>] | --no-color] [-r | -a] [--list] [-v [--abbrev=<length> ...

  7. Win7中修改Chrome浏览器缓存文件目录

    方法有两种: 第一种: 在Windows 7下可以用mklink命令把Chrome浏览器的缓存位置设置为自己需要的文件夹路径. Chrome浏览器默认的缓存文件位于: CC:\Users\登录用户名\ ...

  8. 基于AngularJS/Ionic框架开发的性能优化

    AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...

  9. eclispe 出现超内纯错误

    刚开始以为只要修改tomcat的最大最小内存就可以,结果还是报错,后来才懂需要在eclipse.ini文件中修改 -Xms256m-Xmx512m的值改大些,增加虚拟机运行的内存空间 刚开始最小值只有 ...

  10. URAL 1024 Permutations(LCM)

    题意:已知,可得出 P(1) = 4, P(2) = 1, P(3) = 5,由此可得出 P(P(1)) = P(4) = 2. And P(P(3)) = P(5) = 3,因此.经过k次如上变换, ...