css3之 过渡
早期在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之 过渡的更多相关文章
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS笔记(十三)CSS3之过渡
参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- CSS3 Transition 过渡
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...
随机推荐
- grunt完整的配置demo
const path = require('path') const fs = require('fs'); module.exports = function (grunt) { grunt.reg ...
- Android 开发 框架系列 OkHttp拦截器
前言 此篇博客只讲解okhttp的拦截器功能的详细使用,如果你还不太了解okhttp可以参考我另外一篇博客 Android 开发 框架系列 OkHttp使用详解 添加Interceptor的简单例子 ...
- 小程序template怎样渲染页面的
template模板渲染demo wxml页面 <view class="btmcon"> <text class="btmtitle"> ...
- [JZOJ6347] 【NOIP2019模拟2019.9.8】ZYB玩字符串
题目 题目大意 有一个字符串\(p\).一开始字符串\(s\)为空串. 接下来进行若干次操作:在\(s\)的某个空隙中插入\(p\). 给出操作后的\(s\),问长度最小的\(p\). 思考历程 感觉 ...
- PL/SQL创建用户
步骤一:新建 步骤二:填写信息 对应SQL代码 -- Create the user create user WENT identified by "longrise" defau ...
- agc38C LCMs
https://atcoder.jp/contests/agc038/tasks/agc038_c 题意:给\(a_i\),求\(\sum_{i=1}^n\sum_{j=i+1}^nlcm(a_i,a ...
- Map按键排序(sort by key)
1.需求:已知有如下map,要求按照key倒序排列遍历. Map<String, Integer> map = new HashMap<>(); map.put("1 ...
- Delphi屏幕截图的实现
首先要获得设备环境的句柄,可以通过GetDC函数来获得,对于这个函数,MSDN上是这样说明的 The GetDC function retrieves a handle to a device con ...
- mongodb操作指令(二):索引,聚合,管道
索引 索引本质上是树,最小的值在最左边的叶子上,最大的值在最右边的叶子上,使用索引可以提高查询速度(而不用全表扫描),也可以预防脏数据的插入(如唯一索引) 索引通常能够极大的提高查询的效率, 如果没有 ...
- 20175323《Java程序设计》第五周学习总结
教材学习内容总结 第五章的知识框架总结 代码托管:https://gitee.com/ruirui_yummy/java-besti-20175323 代码提交过程截图 代码量截图 学习进度条 代码行 ...