早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性:

  • transition-property:指定过渡或动态模拟的CSS属性
  • transition-duration:指定完成过渡所需的时间
  • transition-timing-function:指定过渡函数
  • transition-delay:指定开始出现的延迟时间

先来看transition-property属性

transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:

HTML:

<div></div>

CSS:

div {
width: 200px;
height: 200px;
background-color:red;
margin: 20px auto;
-webkit-transition: background-color .5s ease .1s;
transition: background-color .5s ease .1s;
}
div:hover {
background-color: orange;
}

演示结果:

鼠标移入

鼠标移出

特别注意:当“transition-property”属性设置为all时,表示的是所有中点值的属性。

用一个简单的例子来说明这个问题:

假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性,那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时,那么all代表的就是“width”和“height”。

动画--过渡属性 transition-property的更多相关文章

  1. 过渡属性transition

    过渡属性:使元素变化过程可见 transition: all 1s;元素所有变化过程都可见 transition: 1s;元素所有变化过程都可见 transition: 指定属性 2s 1s;指定属性 ...

  2. css过渡属性transition简单示例

    2.transition 简单实例 demo1→在线预览源代码 效果 demo2→在线预览源代码 效果 demo3→在线预览源代码 效果

  3. css3属性 transition transform

    1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...

  4. 监测c3动画过渡完成的事件

    监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...

  5. wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)

    一.在WP8.1中是有动画(Animation)的: 页面导航(默认为旋转式Turnstile).PointerDown/up(默认是倾斜).页面旋转.MenuFlyout出现等等 二.页面过渡(Pa ...

  6. css动画效果之transition(动画过渡效果属性)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  8. Android动画基础——属性动画(Property Animation)

    本篇涉及例子下载:Github 本篇讲android 3.0引入的属性动画框架,上篇写视图动画View Animation时就说过ViewAnimation的缺点,那就是动画作用的是view本身的视觉 ...

  9. transition 动画过渡

    1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. php四个常用类封装 :MySQL类、 分页类、缩略图类、上传类;;分页例子;

    Mysql类 <?php /** * Mysql类 */ class Mysql{ private static $link = null;//数据库连接 /** * 私有的构造方法 */ pr ...

  2. 蓝牙的AVCTP协议笔记

    1.概述     AVCTP协议描述了蓝牙设备间Audio/Video的控制信号交换的格式和机制,它是一个总体的协议,具体的控制信息由其指定的协议(如AVRCP)实现,AVCTP本身只指定控制comm ...

  3. 关于cocoa框架,你所要知道的一切(苹果官方文档,cocoa框架核心竞争力,必须收藏!)

    https://developer.apple.com/library/ios/documentation/General/Conceptual/DevPedia-CocoaCore/Accessib ...

  4. javaScript中的单引号与双引号

    javaScript中的单引号与双引号没有什么区别.但因为xhtml规范要求所有xhtml属性要用双引号括起来.所以在javaScript中使用单引号. var html = '<h2 clas ...

  5. 设计模式:策略模式(Strategy)

    定   义:它定义了算法家族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化, 不会影响到使用算法的客户. 示例:商场收银系统,实现正常收费.满300返100.打8折.......等不同收费 ...

  6. 20145211 《Java程序设计》第8周学习总结——自在飞花轻似梦

    教材学习内容总结 认识NIO Java NIO(New Input/Output)--新的输入/输出API包--是2002年引入到J2SE 1.4里的.Java NIO的目标是提高Java平台上的I/ ...

  7. E1114 Temp Ambient

    这2天DELL服务器的指示灯变为了黄色 ,显示“ E1114 Ambient Temp exceeds allowed range“  原来是周围环境温度超出了许可范围 ,难道最近的天真的是太冷了 ”

  8. iOS 时间戳

    时间戳用过一回,总结一下: 1.在Terminal下获得时间戳: date +%s 原来要在服务器端挂文档,方便开发商下载,用时间戳作为文件名称来区分. 2.在程序下获得时间戳: NSDate * n ...

  9. windows下memcache安装及配置

    1.安装memcached服务,链接为http://i.cnblogs.com/Files.aspx, 下载解压后放在一个文件夹下,在开始搜索中输入cmd, 进入cmd黑框,cd 路径,进入memca ...

  10. Quartz的配置文件quartz.properties详解

    配置 quartz.properties 文件 文件 quartz.properties 定义了 Quartz 应用运行时行为,还包含了许多能控制 Quartz 运转的属性.这个文件应该放在class ...