transition

设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等。

  transition

  transition-property

  transition-duration

  transition-timing-function

  transition-delay

transition-property

  指定参与过渡的属性。

参数:

  none:默认值,也是没有

  all:监测所有变换属性的属性。

  支持过渡效果的属性有以下:(可以单独设置,如果设置多个属性值,用逗号分隔)

属性名称 类型
transform all
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

transition-duration

  设置过渡的需要时间,(也就是说,需要多久才能完成这个 过渡效果)

参数:

  0:默认值

  1s, 2.5s 等等

transition-timing-function

  设置过渡动画的类型,举个例子: 匀速动画, 加速动画。

参数:

  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)

  cubic-bezier:特定的贝塞尔曲线类型。

  step-start::等同于 steps(1, start)

  step-end:等同于steps(1, end)

  steps(第一个参数必须为正数,指定动画会以几步的方式来分割总时长

看不懂什么叫做贝塞尔曲线的话,没关系,我们知道怎么设置就行了,下面:

设置好后,在控制台就可以看见他了。

  

通过调节这两个小球,就会出现不一样的运动效果,上面有个小球,是给你预览效果的。

简单来说一下就可以了,比如下面的小红点的位置,那么在前后各取一个点

y1 - y2

-----------    =  以下面的图为例,x1 和 y1 是大于 x2 和 y2 的,那么得出来的结果是正数,

x1 - x2    这个数呢,就是速度,而且是正的,代表了是往前进的方向运动,负的,会往后退。

  steps(60, start)  steps(60, end)

先来看看,没有加 steps  和 有加的区别。

会明显的看到效果,因为我填的是 steps(10, end) ,end先不要管他,先来看看 第一个参数,这个参数呢,会把总时长,6s  分成 10部分, 6/10 =0.6,0.6秒执行一次,所以,这个动画,会分成 10 步执行。

如果仔细观看的同学,你会发现,他好像只执行了 9次,那么差一次呢? 问题就出现在 end  这个参数,如果你填了 end  那么就会忽略掉最后一步, 填start,就会忽略掉 第一步。

那么利用这个参数可以干嘛呢? 可以完成 逐帧动画 →css3系列之animation实现逐帧动画

 

transition-delay

  这个属性吧,像setTimeout,延迟,延迟多少时间后,执行这个动画。

默认值是0。 还是一样,如果要设置多个属性,用逗号隔开。

  transition

上面几个属性的简写:

  第一个值为:property

  第二个值为:duration

  第三个值为:timing-function

  第四个值为:delay

transition: width 1s linear 1s

上面的表示了,我要监听 该元素width的变化, 如果他改变了,那么   在等待1s后,执行这个动画,用linear效果,1s的时间内完成

  

css3系列之过渡transition的更多相关文章

  1. css3 转换transfrom 过渡transition 和两个@

    做了一个demo.用到一些css3的动画,还是不太熟练,总结了一下.  1. -webkit-font-smoothing: antialiased;       -webkit-font-smoot ...

  2. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  5. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  6. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  7. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  8. 第97天:CSS3渐变和过渡详解

    一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...

  9. 重新想,重新看——CSS3变形,过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

随机推荐

  1. Netty关闭连接流程分析

    在实际场景中,使用Netty4来实现RPC框架,服务端一般会验证协议,最简单的方法的协议探测,判断魔数是否正确.如果服务端无法识别协议会立即抛出异常,并主动关闭连接,此时客户端会收到read信号,在发 ...

  2. spring强行注入和引用的例子

    前提: public class DataProviderManagerImpl implements ApplicationContextAware @Override public void se ...

  3. myBatis初学经验----(1)

    Java常用的三种编写模式 Spring,SpringMVC,myBatis. myBatis(原名:iBatis): 开源的ORM(持久层)框架,之前为apahce旗下顶级开源项目,后转到googl ...

  4. PHP定界符的用法

    当面临大段的负责的文本输入的时候,建议使用定界符. 例如: $age = 28; $str = <<<cont 第一行数据 第二行数据 特殊字符 ' " asdf abc ...

  5. STM32入门系列-使用库函数点亮LED,LED初始化函数

    要点亮LED,需要完成LED的驱动, 在工程模板上新建一个led.c和led.h文件,将其存放在led文件夹内.这两个文件需要我们自己编写. 通常xxx.c文件用于存放编写的驱动程序,xxx.h文件用 ...

  6. Docker(10)- docker create 命令详解

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 作用 创建一个新的容器但不启动它 ...

  7. php 断点续传以及100% 后台zip解压

    前台部分 <div class="col-md-12"> <div class="form-group"> <label clas ...

  8. Sql 解析XML 解决方案参考

    1.定义存储过程 -- =============================================-- Author: <Author,,Name>-- Create da ...

  9. 09-jQuery案例:爱好选择器

    爱好选择器HTML 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <titl ...

  10. mysql实现当前行的值累加上一行的值

    数据库钱包表有日期.收入.支出三个字段.用mysql语句计算每日余额,得如下结果 select m.*, @total :=@total + 收入 - 支出 as 钱包余额 ( select * fr ...