transition的唧唧歪歪
transition是css3新出的一个属性,大白话叫做过渡。
主要有下面这四个属性:
transition-property、transition-duration、transition-timing-function、transition-delay(我做了四个预览效果,点击可查看)
大白话分别是,需要过渡的属性,所用时间,时间曲线(或者说过渡速度?),还有最后的就叫做延迟。
注意:Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本,不支持 transition 属性。Chrome 25 以及更早的版本,需要前缀 -webkit-
好了,咱们来一个一个说。首先是transition-property这个,它规定的是过渡属性的名称,比如宽度(width)、颜色(color)等等,也可以是所有(all),甚至是没有(none);
transition-property效果如下:
然后说这个所用时间transition-duration,单位可以是秒(s),也可以是毫秒(ms);
transition-duration效果如下:
时间曲线transition-timing-function这个属性是很奇妙的一个属性,它涉及到一个“贝塞尔曲线(cubic-bezier)“的概念,在这用张图给大家说一下:
这张图就是贝塞尔曲线(黑长粗),横向是时间,纵向是完成度,图中有四个点P0、P1、P2、P3,P0和P3是固定的点,P1和P2是可操作的点,设置的四个数值前两个是P1的坐标,后两个是P2的坐标,四个值的需是0~1之间(包括0和1),然后生成的这个贝塞尔曲线就是时间曲线了。
注:时间曲线有几个首选值,分别是:
- linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
这里还有一个特殊属性:steps,格式是这样的:
steps(<integer>[,[start|end]]) —— 这个属性写出来是这样:
transition-timing-function: steps(3, start);
还有这样:
transition-timing-function: steps(3, end);
简单来说这个效果类似于蹦蹦跳跳的完成过渡,第一个数字是说跳几次,第二个参数是说在何时跳,具体还是看效果吧,我嘴笨……
transition-timing-function效果如下:
最后一个是延迟transition-delay,就是多久之后开始,默认是0,单位是秒(s)或者毫秒(ms)。
transition-delay效果如下:
所有案例文件在这
效果集合在这
transition的唧唧歪歪的更多相关文章
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- D3中动画(transition函数)的使用
关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- css3中transition和display的坑
不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- border-radius结合transition的一个小应用(动画)
<head lang="en"> <meta charset="UTF-8"> <title></title> ...
随机推荐
- openssl 对称加密算法enc命令详解
1.对称加密算法概述 openssl的加密算法库提供了丰富的对称加密算法,我们可以通过openssl提供的对称加密算法指令的方式使用,也可以通过调用openssl提供的API的方式使用. openss ...
- NET中级课--文件,流,序列化3
1.序列化:将对象及状态保存起来. 反序列化就是逆操作. 2.NET提供了一个接口:System.runtime.serialization.IFormatter接口, 还有实现了这个接口的类Bina ...
- ASP.NET的Application简介1
ASP.NET中的Application 1. Application是用于保存所有用户共有的信息.在ASP时代,如果要保存的数据在应用程序生存期内不会或者很少改变,那么使用Application是理 ...
- Android 使用图标字体库
首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...
- 使用Apache JMeter进行SQL优化性能测试
一. 前言 最近在公司里做性能测试,对于一张大概400万数据的表,进行全表扫描往往会比较费时,更不要说有若干这样的表格级联进行检索了.为了能够在不影响生产环境的前提下进行SQL的性能优化,需要首先利用 ...
- 自己对WSO2 ESB 见解
这周没想到要更新什么内容,就把我最近工作接触的WSO2 ESB简单介绍下吧. 前提: 一切文档,知识都要与官方文档为准. WSO2 ESB: http://wso2.com/products/ ...
- 生成树题目泛做(AD第二轮)
题目1: NOI2014 魔法森林 LCT维护MST.解题报告见LOFTER #include <cstdio> #include <iostream> #include &l ...
- UVA 227 Puzzle - 输入输出
题目: acm.hust.edu.cn/vjudge/roblem/viewProblem.action?id=19191 这道题本身难度不大,但输入输出时需要特别小心,一不留神就会出问题. 对于输入 ...
- [Red5]Red5之Flash流媒体服务器的安装与使用教程完整版(组图)
参看下面链接:http://www.cuplayer.com/player/PlayerCode/Red5/2013/0319/760.html
- Js 导出Excel IE ActiveX控件
function ExportExcel() { var oXL = new ActiveXObject("Excel.Application"); //创建excel应用程序对象 ...