CSS3变换入门（5）
作者：神飞 来源：前端观察 发布时间：2010-01-30 13:29:00
标签：css3,变换,入门,dhtml
变换计时与延迟
使用变换，你可以改变变换的速率，在开始的时候较慢然后在结束的时候加速，反之亦然，或者之间的任何事情。CSS变换有5个计时的关键词，同时也允许你自己定义你自己的计时曲线。
| 名称 | 如何工作 |
| cubic-bezier(x1, y1, x2, y2) | X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的形状。 |
| linear | 均速 |
| ease | 逐渐慢下来 |
| ease-in | 加速(渐入) |
| ease-out | 减速(淡出) |
| ease-in-out | 加速然后减速 |
全部变换？
变换将很快成为所有网站的标准操作方式，从而增强用户界面的体验。
为了给你的整个网站添加一个普遍的变换，一个做法就是添加一个变换到全体选择器，类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换，从而允许你保持一个统一的变换效果：
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
color .25s linear,
background-color .25s linear,
border-color .25s linear;
transition:
color .25s linear,
background-color .25s linear,
border-color .25s linear;
}
一个反对全部变换，同时明确反对使用全体选择器作为CSS reset的争论是，将一个样式用到页面的所有元素会减缓页面的渲染。然而，我并没有发现任何有关与此的证据。有人知道吗？
OK，其实CSS 变换就这么简单，它并不难理解，而且你也不用些大量的JS脚本来实现它，这很方便实用，多做几次练习，你就可以熟练的使用它了。
译注：本文原文题目为 CSS transitions 101，101这个数字比较不好理解，其实美国大学第一门课程通常编号为101，所以101一般表示入门、初级的意思。另外关于 transition 这个词的翻译，我之前是翻译成“转换”，但是这个翻译很别扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人讨论后，觉得翻译成“变换”更合适一些，多谢各位。
译自：CSS transitions 101
中文：CSS3变换入门
原作者：Jason Cranford Teague
译者：神飞
请尊重版权，转载请注明出处，多谢！
0
投稿猜你喜欢
- 在搭建springmvc框架时，底层使用hibernate4.1.8，数据库使用mysql5.1，使用hibernate自动生成数据库表时，
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错： “所有图表类型将在 v1.9.0 版本开始强制使用 Chart- 本文实例讲述了Go语言图片处理和生成缩略图的方法。分享给大家供大家参考。具体实现方法如下：package mainimport (
- 前言：在使用DDT数据驱动+HTMLTestRunner输出测试报告时遇到过2个问题：1、生成的测试报告中，用例名称后有dict() -&g
- URL dispatcher简单点理解就是根据URL，将请求分发到相应的方法中去处理，它是对URL和View的一个映射，它的实现其实也很简单
- 天冷，人懒，事多，我就不全文翻译了。只列几个标题，很多内容完全按照我自己的理解写了一下。想读原汁原味的请移步：Icon design tre
- 一、算法概述AdaBoost 是英文 Adaptive Boosting（自适应增强）的缩写，由 Yoav Freund 和Robert S
- 昨天在做一道CTF题的时候碰到了一个图片异或的问题，操作大概如下：将一个图片读入，然后每字节进行异或操作，核心代码可简化为以下：#codin
- 什么是 MyBatis？MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。 MyBatis 消除了几乎所有的 J
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- 最近接触到一个心理学方面的理论：心流理论。大意是一种个人精力完全投注在某件事情上的感觉。心流产生时会有高度的兴奋和充实感。其实也就是说人在进
- 一、前言上一篇中我们已经知道了客户端通过socket来连接服务端，进行了一次数据传输，那如何实现客户端多次发生数据？而服务端接受多个客户端呢
- 摸到她了！青翠的衣衫，奶白的肌肤，捧在手上的感觉真是太好了，心里美滋滋的。《悟透JavaScript》，一本偶然之作，终于成书并出版了。本书
- 一、题目要求用原生Python实现knn分类算法。二、题目分析数据来源：鸢尾花数据集（见附录Iris.txt）数据集包含150个数据集，分为
- 概述os.access() 方法使用当前的uid/gid尝试访问路径。大部分操作使用有效的 uid/gid, 因此运行环境可以在 suid/
- 一.python实现ping返回延迟繁琐版#!/usr/bin/python3.7# !coding:utf-8__author__ = &
- mouseDown事件和mouseUp事件 大家知道，mouseDown事件和mouseUp事件的组合就是click事件，但是如果在链接上按
- MySQL中的锁锁是为了解决并发环境下资源竞争的手段，其中乐观并发控制，悲观并发控制和多版本并发控制是数据库并发控制主要采用的技术手段（具体
- 一、从线性规划到整数规划1.1、为什么会有整数规划？线性规划问题的最优解可能是分数或小数。整数规划是指变量的取值只能是整数的规划。这在实际问
- 创建main.py文件并粘贴下面代码点击右键运行Debug 'main'后，下方的Debug窗口会出现ImportError
