专栏首页前端说吧css笔记 - transition学习笔记(二)

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

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

transition过渡

1. CSS transition

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

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

name

value

是否必须

备注

transition-property

需要应用过渡效果的CSS 属性的名字/all

填写一个属性名则监听一个,填 all 则监听该元素的所有样式变化,当指定的 CSS 属性改变时,过渡效果将开始执行。

transition-duration

过渡时间

不填写默认为0,不会发生动画渐变效果

transition-timing-function

过渡效果的时间曲线

贝塞尔曲线,默认ease

transition-delay

是否延迟执行过渡

不填写时默认为0

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

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

可填的值

讲解

备注

none

none

我不设置transition好不好?

all

代表所有的属性都会有

有时候你要监听好几个属性值,又很懒不想一个一个写,那就写个all,监听所有。我不知道这个对性能有什么影响,不过估计浏览器没那么智能,不是谁变化监听谁,而是费劲巴拉的监听所有,没有变化的也被监听了,虽然我们肉眼上看不到,但其实他也消耗了。

property-name-list

正常写,比如宽度就写width,高度写height,就把css属性名直接复制粘贴过来即可

注意这里加了一个list,是一个属性列表,可以写多个,多个之间用都好隔开就好

  • 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的工作台来用哦!
  • 各属性值含义

效果描述

备注

linear

匀速

一开始挂上档后可以睡觉了,直到终点不会变档

ease

默认值 慢-快-慢

曲线图就像一座山丘

ease-in

慢-end

像一个自行车子启动的一瞬间,刚开始蹬不动都是慢慢走,后边匀速

ease-out

start-慢

像一个车子刹车的一瞬间

ease-in-out

慢-o-慢

更自然的一个车子发动-走动-刹车停住的过程

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

自己调曲线决定动画的效果随时间变化是快还是慢

0-1的可调范围,别过了

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

bezier配置

linear

cubic-bezier(0,0,0.25,1)

ease

cubic-bezier(0.25,0.1,0.25,1)

ease-in

cubic-bezier(0.42,0,1,1)

ease-out

cubic-bezier(0,0,0.58,1)

ease-in-out

cubic-bezier(0.42,0,0.58,1)

  • 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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-JavaScript类库整理 [更新中...]

      http://www.bootcss.com/p/chart.js/docs/

    xing.org1^
  • CSS3的transition动画功能

    xing.org1^
  • CSS3-实现单选框radio的小动画

    xing.org1^
  • CSS3过渡,不再为JS动画而犯愁

    HTML5学堂:在页面开发中经常会借助JS来书写大量的特效,以获得较好的页面感官效果。但是真正到了使用JS来操作的时候,往往会因为思维逻辑不清晰而显得很凌乱。同...

    HTML5学堂
  • 一文看尽10篇目标检测最新论文(SpineNet/AugFPN/LRF-Net/SABL/DSFPN等)

    一周前 Amusi 整理了 目标检测(Object Detection)较为值得关注的论文:

    Amusi
  • 有向图----强连通分量问题(Kosaraju算法)

    SuperHeroes
  • BAT面试题10:说一下Adaboost及权值更新公式

    Boosting的基本思想是将若干个弱分类器(base learner)组合起来,变成一个强分类器,它需要回答2个问题:

    double
  • 机器学习|Adaboost算法

    01 — Boosting Boosting的基本思想是将若干个弱分类器(base learner)组合起来,变成一个强分类器,它需要回答2个问题: 如何改变训...

    double
  • 【Elasticsearch系列之六】通过logstash迁移ES数据

    数据体量不大,需要在线数据同步的场景(实际使用的是scroll,是执行瞬间的es快照,近实时的数据同步)。

    Vicwan
  • 看YouTube学做广播体操?机器人即将掌握人类所有动作 | 一周AI最火论文

    呜啦啦啦啦啦啦啦大家好,本周的AIScholar Weekly栏目又和大家见面啦!

    大数据文摘

扫码关注云+社区

领取腾讯云代金券