CSS动画 transition和animation

目录

动画概念词解释

css动画transition

特点

js事件监听

代码示例

css动画animation

特点

js事件监听

代码示例


动画概念词解释

  • 屏幕刷新率 显示器每秒绘制图形的次数,单位为赫兹(Hz),大多数为60Hz,每帧预计时间 1 / 60 = 16.6毫秒。
  • 卡顿 浏览器无法在一帧内完成工作,则可能导致跳帧,内容在屏幕上抖动、卡顿。
  • 跳帧 浏览器分别在16ms,32ms,48ms,分别切帧。如果到了32ms准备切帧的时候,浏览器其他任务还未完成,没有执行动画切帧。等恢复动画切帧时,浏览器到了48ms的动画切帧,显示器直接从16ms跳转48ms处画面,则发生跳帧。

css动画transition

需要提供起始和结束两个关键帧,浏览器才能够完成样式差异比对并计算出对应的过渡动画

特点

  • 由于需要根据差异对比计算,所以只支持可识别中间值的属性(如大小,颜色,位置,透明度等 ),如display属性则不支持。
  • 由于首次渲染只有一个关键帧,浏览器无法进行样式差异对比,所以首屏渲染时transition一般不生效

js事件监听

  • transitionrun css过渡动画触发之前
  • transitionstart css过渡动画触发之后
  • transitionend css过渡动画结束

代码示例

css 复制代码
  div {
    opacity: 1;
    transition: opacity, 3s;
  }
  
  div:hover {
    opacity: 0.5;
  }
  

css动画animation

不能配置动画的实际表现,动画的实际表现由@keyframes规则实现

特点

  • 可以在起始帧和结束帧之间自定义中间帧,使得动画更加平滑过渡,对动画有了更好的控制和自定义能力
  • 通过animation-timing-function: steps() 属性实现了transition无法具备的逐帧动画效果
  • 定义了结束帧(@keyframes中的to),在首屏渲染时,它默认会以指定元素在动画开始时刻的样式作为起始关键帧,并结合to定义的结束帧和指定元素animation其他 参数来完成 动画 的计算和动画帧的绘制

js事件监听

  • animationstart 动画开始时触发
  • animationiteration 动画的迭代结束,另一个迭代开始时触发
  • animationend 动画完成时触发

代码示例

css 复制代码
  p {
    animation: 3s infinite alternate slidein;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }
  
相关推荐
翻滚吧键盘20 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。39 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端