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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

先来看transition-property属性

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

语法

transition: property duration timing-function delay;

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

引http://www.imooc.com/code/1010

css3之 过渡的更多相关文章

  1. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  2. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  3. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  4. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...

  5. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  6. CSS笔记(十三)CSS3之过渡

    参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...

  7. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  8. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  9. CSS3 Transition 过渡

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...

随机推荐

  1. Java学习 时间类 Period类与Duration类 / LocalDate类与Instant类 用法详解

    前言 java 8 中引入的两个与日期相关的新类:Period 和 Duration.两个类看表示时间量或两个日期之间的差,两者之间的差异为:Period基于日期值,而Duration基于时间值.他们 ...

  2. windows安装cygwin实现gcc/g++/linux操作等功能

    首先安装cygwin:参照下列博客去cygwin官网下载即可.安装过程中记得勾选需要的安装包,比如gcc/gdb https://blog.csdn.net/qilvmilv/article/deta ...

  3. 0918CSP-S模拟测试赛后总结

    14名.110分.可以算是几次大落之后的一次小小的崛起?? 然而sdfz的开挂选手AK了啊…… T2重测前rank7我就高兴地像个傻子??也不看看这次T1是个什么题. 实力还是不行.一眼秒掉了简单题, ...

  4. TopCoder代码格式模板

    $BEGINCUT$ $PROBLEMDESC$ $ENDCUT$ #include<bits/stdc++.h> using namespace std; class $CLASSNAM ...

  5. hadoop快照管理

    快照相当于对目录做备份,并不会复制所有文件,而是记录文件的变化命令用法 ()hdfs dfsadmin -allowSnapshot 路径 (开启指定目录的快照功能) ()hdfs dfsadmin ...

  6. 获取硬件信息的delphi源码CPUID、操作系统、Mac物理地址、计算机名称、IP地址、用户名

    {-----------------------------------------------------------------------------作者:sushengmiyan 2013.0 ...

  7. python基于SMTP发送邮件

    import smtplib from email.header import Header from email.mime.text import MIMEText ''' SMTP是发送邮件的协议 ...

  8. idea git 下载项目,解决冲突,提交代码

    git安装 1. 安装git工具上篇文章说过请参考 https://mp.weixin.qq.com/s/A8MkjYTXYSMVRlg25TWemQ idea下载coding代码 打开idea准备下 ...

  9. POJ 2074 /// 判断直线与线段相交 视野盲区

    题目大意: 将所有物体抽象成一段横向的线段 给定房子的位置和人行道的位置 接下来给定n个障碍物的位置 位置信息为(x1,x2,y) 即x1-x2的线段 y相同因为是横向的 求最长的能看到整个房子的一段 ...

  10. 石子合并问题 /// 区间DP oj2025

    Description 在一个圆形操场的四周摆放着n堆石子.现要将石子有次序地合并成一堆. 规定每次只能选相邻的两堆石子合并成新的一堆,并将新得的这堆石子数记为该次合并的得分. 试设计一个算法,计算出 ...