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过渡动画结束

代码示例

  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 动画完成时触发

代码示例

  p {
    animation: 3s infinite alternate slidein;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }
  

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: TransitionAnimation 都是 CSS 中用于实现动画效果的属性,它们之间的区别在于: 1. Transition 是指在元素从一种状态转换到另一种状态时,使用一些过渡效果使这个转换更加平滑,比如改变元素的大小、颜色、位置等。它可以控制元素从一个状态到另一个状态的时间、速度、延迟等,是一种简单的动画效果。 2. Animation 则是指在元素的某个属性上定义一系列的关键帧,从而实现更加复杂的动画效果,比如逐帧动画、路径动画等。它可以控制动画的持续时间、循环次数、播放顺序、缓动函数等。 总的来说,Transition 更加简单,适用于实现简单的过渡动画效果;而 Animation 更加复杂,可以实现更加丰富多彩的动画效果。 ### 回答2: transitionanimation都是CSS中用来实现页面动画效果的属性,两者在实现动画上有一些区别。 首先是transition属性,它是用来定义元素在状态改变时的过渡效果。通过指定元素的属性改变的持续时间、过渡效果的速度曲线、延迟等参数来实现过渡效果。常用的属性改变包括背景颜色、宽度、高度等。当元素的属性改变时,改变的过程会以一种平滑的方式进行过渡,给用户带来一种流畅的感觉。transition属性没有明确的开始和结束状态,只关注属性的变化过程。 而animation属性,是用来创建更复杂的动画效果。它通过指定关键帧来控制元素的动画效果。关键帧是在动画过程中定义的状态,可以设定元素在这些状态下的具体样式。通过定义关键帧的规则,控制元素的属性在这些状态之间的过渡。animation属性可以控制动画的持续时间、速度曲线、是否循环等参数。相比于transitionanimation提供了更多的自定义性和灵活性,能够实现更复杂、独特的动画效果。 综上所述,transitionanimation都是用来实现页面动画效果的CSS属性。transition主要关注元素属性的过渡效果,通过属性的变化实现平滑过渡;而animation则是通过定义关键帧来控制元素在不同状态之间的过渡,实现更复杂、精细的动画效果。 ### 回答3: Transition(过渡)和Animation(动画)是两种在CSS中常见的属性,用于改变元素的外观和行为。虽然它们在某些方面相似,但也有一些区别。 首先,Transition用于指定元素在状态改变时的平滑过渡效果。它可以应用于多个属性,并在属性值发生变化时产生动态效果。例如,可以使用transition属性设置元素的宽度从100px过渡到200px,并指定过渡的时间、延迟和动画的快慢。这样,在宽度值改变时,元素将平滑地从一个状态过渡到另一个状态。 Animation则是一种更为复杂和灵活的属性,可以创建更多样化的动画效果。与Transition不同的是,Animation可以定义多个关键帧,每个关键帧指定一个特定的样式。通过指定动画的播放时间、循环次数、延迟等属性,我们可以创建出更加复杂和多变的动画。 另一个区别是,Transition只能在状态发生变化时触发动画,而Animation可以通过将动画属性设置为无限循环来持续播放动画。此外,Animation还支持使用关键帧的函数,将特定时间点的状态进行精确的定义。 总的来说,Transition适用于简单的、仅涉及单个属性的动画效果,而Animation则适用于更为复杂和多变的动画,通过定义关键帧和使用属性值函数,可以创建出更具创意和多样性的动画效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值