美文网首页
animation和transition

animation和transition

作者: Juliana_ | 来源:发表于2019-01-15 14:45 被阅读0次

    相同点

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

    不同点

    • 触发条件不同。animation没有触发条件,transition可以通过类似于:hover的方式触发
    • 循环。transition没有指定循环多少次,animation可以循环无限次animation-iteration-count: infinite;
    • 定义关键帧。animation可以定义每一帧的变化,transition只能设置ease、ease-in等贝塞尔曲线值
    • 预先指定属性。transition必须声明所要转换的属性,animation则不需要
    • 与js的交互。尝试在JavaScript中更改animation需要一系列非常复杂的步骤,这些步骤涉及修改@keyframes样式规则本身。

    相关文章

      网友评论

          本文标题:animation和transition

          本文链接:https://www.haomeiwen.com/subject/iflydqtx.html