代码编织梦想

  • 1、transition 需要去触发比如:点击事件、鼠标移入事件;而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画
  • 2、transition 触发一次播放一次;而 animation 则是可以设置很多的属性,比如循环次数,动画结束的状态等等;
  • 3、transition关注的是样式属性的变化,属性值和时间的关系是一个三次贝塞尔曲线;而animation作用于元素本身而不是样式属性,可以使用关键帧的概念,可以实现更自由的动画效果;
  • 4、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了。

transition 

<div class="box"></div>

.box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;
      /* transition: 哪个属性动 运动在多长时间完成 延迟时间 运动类型;*/
      transition: all .5s linear;
 }

.box:hover {
      width: 300px;
      height: 300px;
}

 animation


<div class="box"></div>

.box {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;
        
    animation-duration: 1s;                 /* 动画时间 */
    animation-name: fillout;                /* 通过name使用 */
    animation-iteration-count: infinite;    /* 循环次数,infinite(无限次循环) */
  }

@keyframes fillout {
    from {
        width: 200px;
        height: 200px;
    }
    to {
        width: 400px;
        height: 400px;
    }
 }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chenzijao/article/details/128816689

transition 和 animation 区别_进击的心的博客-爱代码爱编程

参考于:https://blog.csdn.net/XIAOZHUXMEN/article/details/52003135             http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/         

css3中transition和animation区别的理解-爱代码爱编程

transition和animation区别的理解 transition是过度属性:强调过度,他的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。它类似于flash的补间动画,设置一个开始关键帧,一个结束

transition和animation的区别及详细解析-爱代码爱编程

答案: 他们虽然都可以做出动画效果,但是transition主要做简单的过渡效果,而animation可以做复杂的动画效果,在语法和用法上有非常大的区别。 transition是过渡属性,强调过渡,他的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画,过渡只有一组(两个:开始-结束)关键帧。 animation是动画属性,他的实现不需

CSS transition和animation的区别-爱代码爱编程

本文章讲解内容是 transition 与 animition 动画效果的不同点与相同点, 虽然它们都可以实现CSS动画效果 结合 “css 动画实现的 3 种方式” 来理解; 因为这篇文章就是继这篇文章的延续。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 一:transition和animat

transition、animation和transform-爱代码爱编程

transition,过渡。用于平滑改变css的属性,(如盒子的长宽等,鼠标移入悬浮的时候产生动效的情况。 常用属性 transition-property : 指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡 transition-duration: 指定这个过渡的持续时间 t

CSS animation 与 transition 有何区别?-爱代码爱编程

CSS的transition只有两个状态:开始状态 和 结束状态;但animation可能是多个状态,有帧的概念 CSS的transition需要借助别的方式来触发,比如CSS的状态选择器(如:hover)或 借助JavaScript来触发;animation可以自动触发 CSS transition 和 animation 虽然实现动效方式

css--transition和animation-爱代码爱编程

1.transition(过渡) 格式:transition:要过渡的属性 花费时间 运动曲线 何时开始(后两个属性可以不写) 实例: <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width

transition 和 animation 的简单使用_神膘护体小月半的博客-爱代码爱编程

两者的区别 transition 需要触发animation 不需要触发transition 系列 常用属性 transition-property 需要过渡的属性值为 all,所有属性都添加过渡效果值为具体属性值,如 width,那么只有 width 属性添加过渡效果 transition-duration 实现过渡的时长单位为毫秒

移动web主轴设置和flex总结-爱代码爱编程

移动web主轴设置和flex总结 设置主轴方向修改主轴经常的使用场景: 弹性盒子换行设置侧轴对齐方式flex 总结梳理主轴排列方式侧轴对齐方式-单行对齐侧轴对齐方式-多行弹性盒子换行设置主轴方向伸缩比

css的总结-爱代码爱编程

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。 概述 简单来说,层叠样式表(Cas