css3系列之过渡transition
transition
设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等。
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的更多相关文章
- css3 转换transfrom 过渡transition 和两个@
做了一个demo.用到一些css3的动画,还是不太熟练,总结了一下. 1. -webkit-font-smoothing: antialiased; -webkit-font-smoot ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- CSS3 动画及过渡详解
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...
- 第97天:CSS3渐变和过渡详解
一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
随机推荐
- Netty关闭连接流程分析
在实际场景中,使用Netty4来实现RPC框架,服务端一般会验证协议,最简单的方法的协议探测,判断魔数是否正确.如果服务端无法识别协议会立即抛出异常,并主动关闭连接,此时客户端会收到read信号,在发 ...
- spring强行注入和引用的例子
前提: public class DataProviderManagerImpl implements ApplicationContextAware @Override public void se ...
- myBatis初学经验----(1)
Java常用的三种编写模式 Spring,SpringMVC,myBatis. myBatis(原名:iBatis): 开源的ORM(持久层)框架,之前为apahce旗下顶级开源项目,后转到googl ...
- PHP定界符的用法
当面临大段的负责的文本输入的时候,建议使用定界符. 例如: $age = 28; $str = <<<cont 第一行数据 第二行数据 特殊字符 ' " asdf abc ...
- STM32入门系列-使用库函数点亮LED,LED初始化函数
要点亮LED,需要完成LED的驱动, 在工程模板上新建一个led.c和led.h文件,将其存放在led文件夹内.这两个文件需要我们自己编写. 通常xxx.c文件用于存放编写的驱动程序,xxx.h文件用 ...
- Docker(10)- docker create 命令详解
如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 作用 创建一个新的容器但不启动它 ...
- php 断点续传以及100% 后台zip解压
前台部分 <div class="col-md-12"> <div class="form-group"> <label clas ...
- Sql 解析XML 解决方案参考
1.定义存储过程 -- =============================================-- Author: <Author,,Name>-- Create da ...
- 09-jQuery案例:爱好选择器
爱好选择器HTML 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <titl ...
- mysql实现当前行的值累加上一行的值
数据库钱包表有日期.收入.支出三个字段.用mysql语句计算每日余额,得如下结果 select m.*, @total :=@total + 收入 - 支出 as 钱包余额 ( select * fr ...