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. The Story of self Parameter in Python, Demystified

      转自:http://www.programiz.com/article/python-self-why If you have been programming in Python (in obj ...

  2. python(3)-lambda表达式

    >>> fun = lambda a: a+1 >>> fun(1) 2 >>> fun = lambda a,b: a+b >>&g ...

  3. java调用.net asmx服务

    有时候,在java下开发会调用一下.net下写的服务,看网上有各种方法,但总是不成功,总结下自己测试过能调用成功的方式: 1. 原始方式http-soap public static String p ...

  4. MYSQL5.5和5.6参数的差异

    performance_schema 在 MySQL 5.6 中默认是开启的,但相关的很多参数相比 MySQL 5.5 却是降低了,例如 performance_schema 自动调整到 445 个表 ...

  5. Redis 命令 - Transactions

    DISCARD Discard all commands issued after MULTI 127.0.0.1:6379> MGET bank:A:account bank:B:accoun ...

  6. C# 计算文件的 Hash 值

    /// <summary> /// 提供用于计算指定文件哈希值的方法 /// <example>例如计算文件的MD5值: /// <code> /// String ...

  7. 【Android学习】调用系统短信、电话

    今天全心投入Android学习已经有一段时间了,从起初的啥也不懂,到现在半知半解状态,随笔记录些简单且常用的系统功能代码. 调用Android系统短信,其实调用短信非常简单,一个方法就可以搞定.我们可 ...

  8. Xcode-项目模板修改

    项目模板就是创建工程的时候选择的某一个条目, Xcode会根据选择的条目生成固定格式的项目 例如想创建一个命令行项目就选择Command Line Tool 如何修改项目模板 1.应用程序中,找到Xc ...

  9. [GeekBand] 面向对象的设计模式(C++)(1)

    一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心. 这样,你就能一次又一次 地使用该方案而不必做重复劳动. 0. 从面向对象谈起 底层思维与抽象思维: 底层思维要求程序员&q ...

  10. Wininet笔记一

    1, InternetOpen 创建根句柄,由下一层的 InternetOpenUrl 和 InternetConnect 使用,而 InternetConnect 创建的句柄又被之后的几个函数使用. ...