CSS3中Transition属性详解以及示例分享_CSS/HTML

1、transition-property的语法
[css]
transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)

  2、transition-property的属性值
  (1)none:transition马上停止执行
  (2)all:元素产生任何属性值变化时都将执行transition效果
  (3)attr:指定要运动的样式

一、transition-property——指定要运动的样式

  1、transition-property的语法
[css]
transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)

  2、transition-property的属性值
  (1)none:transition马上停止执行
  (2)all:元素产生任何属性值变化时都将执行transition效果
  (3)attr:指定要运动的样式

  二、transition-duration
  transition-duration是指定元素转换过程的持续时间,单位为秒(s)。transition-duration可以作用于所有元素,包括:before和:after

伪元素。其默认值是0,也就是变换时是即时的。

  三、transition-delay—— 延迟时间
  transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,单位为s(秒)

,其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,

没有延迟。

  四、transition-timing-function——指定运动形式
  transition-timing-function : ease(逐渐变慢) | linear(匀速) | ease-in(加速) | ease-out(减速) | ease-in-out(先加速然后减

速) | cubic-bezier(该值允许你去自定义一个时间曲线)(number, number, number, number>)

  五、transition的综合写法
[css]
元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}

  六、transition的综合兼容写法

  1、Mozilla内核
[css]
元素选择器{-moz-transition:运动的样式 持续时间 运动形式 延迟时间;}

  2、Webkit内核
[css]
元素选择器{-webkit-transition:运动的样式 持续时间 运动形式 延迟时间;}

  3、Opera内核
[css]
元素选择器{-o-transition:运动的样式 持续时间 运动形式 延迟时间;}

  4、W3C 标准
[css]
元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}

 

实例效果:

复制代码 代码如下:

a{transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;}

时间: 2024-10-13 15:32:40

CSS3中Transition属性详解以及示例分享_CSS/HTML的相关文章

Java 中的注解详解及示例代码_java

在Java中,注解(Annotation)引入始于Java5,用来描述Java代码的元信息,通常情况下注解不会直接影响代码的执行,尽管有些注解可以用来做到影响代码执行. 注解可以做什么 Java中的注解通常扮演以下角色 编译器指令 构建时指令 运行时指令 其中 Java内置了三种编译器指令,本文后面部分会重点介绍 Java注解可以应用在构建时,即当你构建你的项目时.构建过程包括生成源码,编译源码,生成xml文件,打包编译的源码和文件到JAR包等.软件的构建通常使用诸如Apache Ant和Mav

Android中Intent机制详解及示例总结(总结篇)_Android

最近在进行android开发过程中,在将 Intent传递给调用的组件并完成组件的调用时遇到点困难,并且之前对Intent的学习也是一知半解,最近特意为此拿出一些时间,对Intent部分进行了系统的学习并进行了部分实践,下面将自己的学习及Intent知识进行了详细的归纳整理,希望能帮助到同样遇到相同问题的博友. 下面是Intent介绍.详解及Intent示例总结: 一.Intent介绍: Intent的中文意思是"意图,意向",在Android中提供了Intent机制来协助应用间的交互

Android中Intent机制详解及示例总结(总结篇)

最近在进行android开发过程中,在将 Intent传递给调用的组件并完成组件的调用时遇到点困难,并且之前对Intent的学习也是一知半解,最近特意为此拿出一些时间,对Intent部分进行了系统的学习并进行了部分实践,下面将自己的学习及Intent知识进行了详细的归纳整理,希望能帮助到同样遇到相同问题的博友. 下面是Intent介绍.详解及Intent示例总结: 一.Intent介绍: Intent的中文意思是"意图,意向",在Android中提供了Intent机制来协助应用间的交互

Android(安卓)中layout_weight属性详解

当控件本身layout_width设置为fill_parent的时候,layout_weight数值越小,所占空间越大,但尽可能大是有限度的,即fill_parent. 当控件本身layout_width设置为wrap_content的时候,layout_weight数值越小,所占空间也越小,但这个小是有限度的,即wrap_content. 例子 看了一下源码,虽说不太懂,但了解了下大概意思,按照自己的理解总结一下,直接写一下简化的代码吧(下面的代码是LinearLayout源文件中一部分的精简

yepnope.js使用详解及示例分享_javascript技巧

yepnope.js的一个典型实例: yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 此实例表示如果Modernizr.geolocation为真的时候加载normal.js,为假则加载polyfill.js及wrapper.js. yepnope完整语法: yepnope([{ test : /* boolean(ish) 输入条件 */, y

Hibernate配置文件中映射元素详解

详解 本文中将讲述Hibernate的基本配置及配置文件的应用,这对于正确熟练使用Hibernate是相当关键的. 配置文件中映射元素详解 对象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素,映射文件的代码如下. <?xml version="1.0"?><!--所有的XML映射文件都需要定义如下所示的DOCTYPE.Hibernate会先在它的类路径(c

AngularJs bootstrap详解及示例代码_AngularJS

AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

AngularJs html compiler详解及示例代码_AngularJS

原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl="cf"></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静

JavaScript精炼之构造函数 Constructor及Constructor属性详解_javascript技巧

除了创建对象,构造函数(constructor) 还做了另一件有用的事情-自动为创建的新对象设置了原型对象(prototype object) .原型对象存放于 ConstructorFunction.prototype 属性中. 例如,我们重写之前例子,使用构造函数创建对象"b"和"c",那么对象"a"则扮演了"Foo.prototype"这个角色: // 构造函数 function Foo(y) { // 构造函数将会以特