transition:

过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;默认值分别为:all 0 ease 0

1、局限性:

1)只能设置一个属性

2)需要伪类/事件触发才执行

3)只能设置动画初始值和结束值

2、过渡函数:

liner :匀速
ease-in:减速
ease-out:加速
ease-in-out:先加速再减速
cubic-bezier:三次贝塞尔曲线
 
3、以下情况下,属性值改变不能产生过渡效果

1)background-image,如url(a.jpg)到url(b.jpg)(与浏览器支持相关,有的浏览器不支持)等,浏览器支持情况

2)float浮动元素

3)height或width使用auto值=>解决:用js计算

4)display属性在none和其他值(block、inline-block、inline)之间变换 =>解决:加上延时 setTimeout(function(){ },0)

5)position在stativ和absolute之间变换

 
animation:
1)可以控制到每一帧
2)  结合@ keyframes使用

参考:https://www.cnblogs.com/shenfangfang/p/5713564.html

配合动画:
1)宽高变化
  高度从0到auto:
  a、用max-height (缺陷:实际内容不会达到该高度,卡顿)
  b、transition+js
2)缩放scale(中心开始)
3)位置移动
  a、transform: translate(不适用position: absolute;transform: translate布局)
  b、top/left/right/bottom与absolute
  c、margin-top(left,right,bottom)

animation与transition区别的更多相关文章

  1. CSS 中 transform、animation、transition、translate的区别

    在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...

  2. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  3. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  4. animation和transition做动画的区别

    animation做动画,是不需要去触发的,可以定义一开始就执行 transition做动画,是需要人为触发,才能执行的

  5. animation与transition

    animation 动画,无法直接决定开始时间 demo1 @-webkit-keyframes demo-animation1{ 0% { -webkit-transform:translate3d ...

  6. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  7. CSS动画:animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  8. 学习animation、transition、transform和@keyframes的使用

    当我们需要给页面添加动画效果时,需要用到CSS3的animation样式属性: 例如: animation: test 2s infinite; 其中test是动画的名称,2s是动画的时长,infin ...

  9. animation和transition

    相同点 指定要侦听更改的CSS属性. 设置计时(缓和)功能以改变从一个属性值到另一个属性值的速率 指定持续时间以控制动画或转换所需的时间 以编程方式收听您可以随意执行的动画和特定于转换的事件 可视化C ...

随机推荐

  1. 从理论到实践,全方位认识DNS(理论篇)

    对于 DNS(Domain Name System) 大家肯定不陌生,不就是用来将一个网站的域名转换为对应的IP吗.当我们发现可以上QQ但不能浏览网页时,我们会想到可能是域名服务器挂掉了:当我们用别人 ...

  2. 调试JDK源代码-一步一步看HashMap怎么Hash和扩容

    调试JDK源代码-一步一步看HashMap怎么Hash和扩容 调试JDK源代码-ConcurrentHashMap实现原理 调试JDK源代码-HashSet实现原理 调试JDK源代码-调试JDK源代码 ...

  3. 【打CF,学算法——二星级】CF 520B Two Buttons

    [CF简单介绍] 提交链接:Two Buttons 题面: B. Two Buttons time limit per test 2 seconds memory limit per test 256 ...

  4. JAVA实现RSA加密解密 非对称算法

    首先RSA是一个非对称的加密算法.所以在使用该算法加密解密之前,必须先行生成密钥对.包含公钥和私钥 JDK中提供了生成密钥对的类KeyPairGenerator,实比例如以下: public stat ...

  5. LeetCode 709. To Lower Case (转换成小写字母)

    题目标签:String 题目让我们把大写字母转换成小写,只要遇到的是大写字母,把它 + 32 变成 小写就可以了. Java Solution: Runtime beats 100.00% 完成日期: ...

  6. MSP430 G2553 Timer 中断总结

    目前总共用到了四个中断向量,我觉得已经把G2553的所有定时器中断都用到了. 定时器有两个,TA0与TA1,每个定时器又有两个中断向量 1,CCR0到达时的中断,在计数模式时候很有用,平时定时器的基本 ...

  7. Scala快速统计文件中特定单词,字符的个数

    val fileContent=Source.fromFile("/home/soyo/桌面/ss5.txt").getLines.mkString(",") ...

  8. astgo-官方提供的使用技巧大全

    Astgo服务器相关: 1.Astgo支持双IP绑定,比如联通.电信IP,Astgo 默认SIP端口 5080和5061 菜单: 选项->系统设置 可以设置以上参数 2.支持RC4加密,自动判断 ...

  9. 02、监听key是否正确

    SDKInitializer其实是有两个action,第三个SDK_BROADTCAST_INTENT_EXTRA_INFO_KEY_ERROR_CODE虽然是一个常量但是它不是action.第二个a ...

  10. Euclid(几何)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2831 题意:已知A,B,C,D,E,F的坐标, ...