css笔记 - transition学习笔记(二)

开始把7,8月份学的css整理一下

transition过渡

1. CSS transition

transition过渡 ：用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

2. transition的各项子属性详细值

transition-property需要交代给你的那些事

• 指定的这个属性值改变时，就会有动画效果，所以你想看谁 （属性） 的动画（不是笑话哦），这个值就填谁 （属性名） ，比如本案例，改变的时蓝色线条的长度（宽度）值，所以这个值设置为width属性名就行了。
• 可填的值：

• js里的写法：

obj.style.transitionProperty = 'width,height,transform';

规律就是，把中间那个横线去掉，然后第二个及以后字母的首字符大写。

transition-duration需要交代给你的那些事

• 整个动画持续的时间，即完成动画需要的时长
• 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。(手册一直强调这句话)
• 可能的值：
  • time，时间值，1s代表1秒。3500ms = 3.5秒；；；；
  • 具体就是数值加上单位即可，换算遵循1000ms=1s的格式。
  • 但通常来说，我比较喜欢用.35s。
  • 还是根据需要的动画效果视情况而定。但是一定一定要设置就是对了。

前两个是必填的，否则不起作用

• js里的写法：

obj.style.transitionDuration = '3.5s';

transition-timing-function需要交代给你的那些事

• 规定过渡效果的速度曲线，是先快后慢？还是先慢再快最后慢？还是匀速从头开到尾呢？这就对应了他的属性值ease-out、ease-in-out、linear。
• 原理就是:过渡效果随着时间改变其速度。
• 当然你也可以自定义动画曲线：cubic-bezier(n,n,n,n)。就是大名鼎鼎的贝塞尔曲线啦。又好像animate的帧一样，时间开头怎么样动，时间结尾怎么样动，不过他还是时间大范围内的凭感觉控制，没有animation的帧动画强大，只要你愿意，可以把animation当作flash的工作台来用哦！
• 各属性值含义

cubic-bezier四个值设置成什么样刚好是其他五个值的效果呢？

• js写法：

  object.style.transitionTimingFunction="linear"

transition-delay需要交代给你的那些事

• 延迟执行动画效果。
• 可以不填，我一般都不填，除非需要和另一个样式配合时，为了等待另一个样式完毕再执行这个，就需要用上delay了。
• js写法：

object.style.transitionDelay="2s"

--------- 懒人写法 ----------

单个属性 简写写法：

  transition: propertyName duration+s timing-function dealy

过渡：属性名 动画时间 动画曲线 延迟时间；

transition应用多个属性

多个属性 简写写法：

  transition: propertyName1  propertyName2 propertyName3 ...后边同上;

过渡： 属性名1 属性名2 属性名3 ...;

除了使用all属性，还可以使用逗号隔开多套。例如：

  transition: transform .45s ease-in-out, margin .2s linear .2s;

js写法：

  object.style.transition="width 2s"

3. 浏览器兼容性

IE10+，Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari、Chrome<25 需要前缀 -webkit-。

兼容性写法： css transition: width 1s; -moz-transition: width 1s; /* 以前习惯第二个写-webkit-的，今天看官网还是自己写错了 */ -webkit-transition: width 1s; -ms-transition: width 1s; -o-transition: width 1s; 特殊情况遇到transform这一类也需要兼容性写法的属性时： css transition: transform 1s; -moz-transition: -moz-transform 1s; -webkit-transition: -webkit-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; 多个transition属性分开写时，添加兼容性前缀的方法同上，不再赘述。顺序是：正常；-moz-、-webkit-、-ms-、-0-！

4. 贝塞尔曲线

运动曲线是动画的灵魂

ease-in 缓入，从0开始加速，适合元素离开页面的时候。

ease-out 缓出，有一个刹车的感觉，速度逐渐变没。适合一个元素进入页面的 时候

ease-in-out 缓入缓处，开头结尾都没有速度，先加速，再减速。适合用在一个元素从页面a到b点。

linear 匀速，死板别用。

cubic-bezier(n,n,n,n)

css3-beziercurve

四个点（起始点、终止点以及两个相互分离的中间点）