美文网首页
CSS动画:transtion和animation

CSS动画:transtion和animation

作者: Marshall3572 | 来源:发表于2021-04-09 10:22 被阅读0次

transtion和animation的区别

  • transition是过渡,是样式值的变化过程,只有开始和结束。animation也叫关键帧,通过和keyframe结合可以设置中间帧的一个状态。
  • animation 配合 @keyframe 可以不触发时间就触发这个过程,而 transition 需要通过 hover 或者 js 事件来配合触发;
  • animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,transition 只能触发一次;
  • animation 可以结合 keyframe 设置每一帧,但是 transition 只有两帧;
  • 在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程;而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;
    我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大;但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;

相关文章

  • CSS动画:transtion和animation

    transtion和animation的区别 transition是过渡,是样式值的变化过程,只有开始和结束。an...

  • 4 动画及组件

    vue-> 过渡(动画) (它的本质走的是css3: transtion ,animation) 组件 ...

  • css动画

    css有几个容易混淆的属性:animation,transtion,translate,transform ani...

  • css3

    css3中会忘记的主要是filter,transform,animation,transtion,box-shad...

  • CSS-3D知识

    1.CSS动画 1.1 CSS动画属性-animation animation:为CSS动画属性,使用该属性可以替...

  • 2017-06-18

    css3中变形与动画(上) 1.Animation 动画定义animation动画2.Animation动画播放 ...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • transtion animation

    1、@keyframes定义动画,以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于...

  • CSS3 animation动画

    CSS3 animation动画 1、@keyframes 定义关键帧动画2、animation-name 动画名...

  • 前端知识CSS3 animation动画

    CSS3 animation动画 1、@keyframes 定义关键帧动画2、animation-name 动画名...

网友评论

      本文标题:CSS动画:transtion和animation

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