CSS3--transition

它可以用来做什么？

CSS transitions可以让一个css属性值在一个给定的时间内平滑的改变，而不再是和以前一样，当我们设置一个css属性值时，它会立即表现出来结果，如color: red, 当我们设置完这个属性，如果是应用在span上，那么span内的文字立即会变成红色。而我们如果用到transition,那么这个值就会在一定时间内，假设以前是黑色，就会由黑色逐渐变成红色，而不再是立即变成红色。

谁支持它？

如何用它？

transition: <property> <duration> <animation type> <delay>

webkit:-webkit-transition; mozilla: -moz-transition; opera: -o-transition; IE 10 beta: -ms-transition;

#id_of_element {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;

<property>:是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；还有就是css属性。当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，CSS属性是可以指定元素的某一个属性值。

<duration>:是用来指定元素转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是和不用transition的效果是一样的，即时发生效果。

<animation type>:取值可以从下列取值中选取，其实就是贝塞尔曲线的变化，觉得很难，这里有个工具网站可以帮你完成这些取值

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

下面让我们看一组实际效果关于选择不同的animation type：

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome!

Hover on me

MouseOver上去对于每个test-box执行了如下操作：

background-color: #FFFFFF;
border-radius: 30px 30px 30px 30px;
margin-left: 420px;
transform: rotate(720deg);

<delay>: 是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒），其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是"0"，也就是变换立即执行，没有延迟。

让我们来看一组关于delay的例子:

Hover on me

参考文章：

http://css3.bradshawenterprises.com/transitions/

http://www.w3cplus.com/content/css3-transition

转载于:https://www.cnblogs.com/moonreplace/archive/2012/10/19/2730081.html

CSS3--transition相关推荐

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
CSS3 Transition介绍
CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover.:focus的条件下触发.过去,为了实现这种平滑的过渡效果,我们需要借助于Flash技术,现在只需要简单的使用CSS3 ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
css通知页面,CSS3 transition 实现通知消息轮播条
Vue 版本,拷贝到文件即可使用 {{ item }} export default { data () { return { // 开启动画 isAnimated: false, // 轮播数据 d ...
[ISUX译转]CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,"All You Need to Know ...
css3 transition uncover (揭开效果)
一.构建页面页面构建思路和前一篇差不多.请移步<css3 transition effect(Flip翻转效果)> 由于flip存在翻转时候的效果,需要设置背面情况下不显示的CSS,但是 ...
css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画发布 ...
CSS3 transition实现手风琴效果
CSS3 transition实现手风琴效果最近在项目中遇到了一个需求,需要完成一个手风琴效果的展示,最后通过CSS3 transition实现了这个效果,下面就分享下实现方法. 效果首先看下效果 ...
css3 transition的应用
css3 的transition:允许css属性值在一定的时间区内平滑的过渡. transition-property:变换延续的时间 transition-duration:在延续时间段 trans ...
css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

CSS3--transition

CSS3--transition相关推荐

最新文章

热门文章