美文网首页
CSS和CANVAS动画

CSS和CANVAS动画

作者: 九瀺 | 来源:发表于2019-08-13 23:58 被阅读0次

兼容问题

css兼容:IE10+、FF、oprea(animation);safari、chrome(-webkit-animation)
canvas兼容:IE9+
JS+DOM兼容:没有兼容问题

css动画比JS流畅的前提:

  1. chrome基础的浏览器;
  2. js执行一些昂贵的任务;
  3. css动画不触发layout和paint;
    (css3和js触发layout和paint时都会阻塞后续操作)以下属性的修改不会触发layout和paint:
    backface-visibility、opacity、perspective、perspective-origin、transform

不同点:

  1. 时间尺度上,keyframes动画粒度粗,js的动画粒度可以很精细;
  2. CSS3里被支持的时间函数不多,不够灵活;
  3. css3动画无法做到支持两个状态以上的转换;
  4. CSS3更为简单;
  5. 对于帧速表现不好的浏览器,CSS3可以做到自动优雅降级,JS还需要写额外的代码;
  6. CSS3动画有天然的事件支持(AnimationEnd/TransitionEnd)
  7. CSS3有兼容性问题。JS没 有兼容性问题;

相关文章

  • CSS和CANVAS动画

    兼容问题 css兼容:IE10+、FF、oprea(animation);safari、chrome(-webki...

  • 实现动画的6种方案

    通常,前端实现动画的方案主要有6种:CSS3 transition、CSS3 animation、Canvas动画...

  • svg高级应用及动画

    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和...

  • 手把手教你canvas动画(汉堡图标动画一)

    动画效果如下图: 先附上源码: html端: 你的浏览器暂且不支持canvas css端: .canvas { ...

  • 开发笔记3-H5页面实现帧动画

    动画的实现方式有以下几种方式:js、css、canvas、gif gif对透明效果支持不好,比较方便,但是现在动画...

  • 目标

    调研作答前台项目 进阶webpack+react 学习HTML5和CSS3相关(动画,canvas,svg,web...

  • 2018-08-22

    动画技术向 canvas动画,是AN可以输出的吗?json文件又是属于什么动画的?和canvas是不同的格式的吧?

  • 用视频软件AE + bodymovin制作网页动画

    我们知道,做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形...

  • 重拾Canvas动画(未完成)

    学习前端到现在已经接触了四种动画的形式,他们分别是:1.CSS32.JS3.SVG4.Canvas CSS3:功能...

  • HTML5:canvas

    1.canvas是inline-block元素,canvas和 img相同,不建议用css控制canvas初始宽高...

网友评论

      本文标题:CSS和CANVAS动画

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