之前的transform 可以实现转换,但是一下子就放大缩小视觉上不太好看,要想渐变该如何呢?可以使用transition

transition主要包含四个属性值:

transition: property duration timing-function delay;

执行变换的属性:transition-property;

变换延续的时间:transition- duration;

在延续时间段,变换的速率变化:transition-timing-function;

变换延迟时间:transition- delay;

其中~

transition-property 可取值:

none :transition马上停止执行

all:任何属性变化都执行

其他常见的值:

1、color: 跟颜色有关系的,如:background-color,border-color,color;

2、length:跟数字有关系的,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,margin;

3、transforms属性;

transition-timing-function 可取值:

ease:逐渐变慢

linear:匀速

ease-in:加速

ease-out:减速

ease-in-out:加速然后减速

CSS3:transition过渡效果的更多相关文章

  1. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  2. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  3. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  4. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  5. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  6. CSS3动画--过渡效果

    CSS3动画--过渡效果 transition                               设置四个过渡属性 transition-property          过渡的名称 tr ...

  7. CSS背景渐变支持transition过渡效果

    background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...

  8. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  9. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  10. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

随机推荐

  1. android瀑布流照片墙实现代码详解

    照片墙的实现,是需要往手机里面添加很多图片的,如果没有对资源进行合理的释放,程序很快就会出现OOM.所以需要用到LruCache算法来缓存图片. 1,首先是图片资源类,这个类中包含了很多图片链接. p ...

  2. SqlServer中截取小数位数

    方法一:convert(float,字段名) as 别名 select convert(float,round(10.123232,2)) 结果:10.12 select convert(float, ...

  3. [LOJ #2162]「POI2011」Garbage

    题目大意:给一张$n$个点$m$条边的无向图,每条边是黑色的或白色的,要求变成一个目标颜色.可以从任意一个点开始,走一个简单环,回到开始的点,所经过的边颜色翻转.可以走无数次.问是否有一个方案完成目标 ...

  4. CF995E Number Clicker 解题报告

    CF995E Number Clicker 题目描述 Allen is playing Number Clicker on his phone. He starts with an integer u ...

  5. 雅礼集训 Day7 T1 Equation 解题报告

    Reverse 题目背景 小\(\text{G}\)有一个长度为\(n\)的\(01\)串\(T\),其中只有\(T_S=1\),其余位置都是\(0\).现在小\(\text{G}\)可以进行若干次以 ...

  6. 熊猫(i)

    题目描述 熊猫喜欢吃数,熊猫对与每个数都有他独特的评价.具体来说,熊猫对数 xx 的评价是个四元组 (a, b, c, d)(a,b,c,d),计算方式如下: 首先将 xx 写成二进制形式(不含前导零 ...

  7. mysql数据定期备份删除

    1.这里只写备份mysql的数据库的方法,全备份,包括定时删除. 准备工作,弄一个文件夹存数据库备份数据 第一步:编写shell 脚本,命名为shell.sh #备份数据库 backupdir=/we ...

  8. github的使用简易教程

    一.安装git https://git-for-windows.github.io/ git  ->  git bash 二.配置参数 $ git config --global user.na ...

  9. 【Android开发日记】之入门篇(十一)——Android的Intent机制

    继续我们的Android之路吧.今天我要介绍的是Android的Intent. 对于基于组件的应用开发而言,不仅需要构造和寻找符合需求的组件,更重要的是要将组件有机的连接起来,互联互通交换信息,才能够 ...

  10. Linux & Android 多点触摸协议

    Linux & Android 多点触摸协议 Android4.0多点触摸入门 1 KERNEL 对于触摸屏的驱动我们简单的划分为两个主要的部分,一个是注册,另一个是上报. 1.1 注册 单点 ...