关于animation和transition一点知识

在使用CSS3动画时相信很多人都会接触过animation,transition以及transform属性。通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript——CSS3是世界上最可爱的语言

CSS3动画和JS动画的区别

JS 实现的是帧动画 CSS3 实现的是补间动画

帧动画:使用定时器,每隔一段时间,更改当前的元素 补间动画:过渡(加过渡只要状态发生改变产生动画)动画(多个节点来控制动画)性能会更好

transition

transition是一个简单的动画属性,可以看作是是animation的简化版本,通常拿来配合事件触发使用,简单易用

transition的属性值

描述属性
transition-property需要过渡的属性,也可以是all,不能用block,none等
transition-duration指定从一个属性到另一个属性过渡所要花费的时间。默认值为0,为0时,表示变化是瞬时的,看不到过渡效果
transiton-timing-function就是过渡的动画类型。可用的类型有liner(匀速)、ease-in(减速)、ease-out(加速)ease-in-out(先加速再减速)、cubic-bezier:三次贝塞尔曲线,可以定制
transition-delay指定检测到过渡行为之后延迟一定时间后才开始进行执行

transition特性

  • transition需用事件触发【比如加个hover伪类】,不能在网页加载时自动发生
  • 一次性,不能重复发生,除非一再触发
  • 只有两个状态:开始和结束状态
  • 一条transition规则只能定义一个属性
<body>
    <div class="box"/>
</body>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

    .box:hover {
        width: 200px;
    }
</style>

效果如下

也可以在 hover中写 transition: width 1s 0.5s ease-in-out

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}

其实写在hover上也是可以的,但是当我移出元素后,元素宽度立马恢复,而没有过渡! 原因很简单,你transistion只写在hover上,也就是说只有鼠标移上去的时候,该伪类才生效

animation

animation的属性值

属性描述
animation-name用来调用@keyframes定义好的动画,与@keyframes定义的动画名称一致
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function速度曲线,和transition-timing-function一样,可用的类型有liner(匀速)、ease-in(减速)、ease-out(加速)ease-in-out(先加速再减速)、cubic-bezier:三次贝塞尔曲线,可以定制
animation-delay规定动画何时开始,默认是 0
animation-iteration-count规定动画被播放的次数。默认是 1
animation-directionnormal 默认值,如果设置为normal时,动画每次循环都是向前(即按顺序)播放,alternate(轮流),动画播放在第偶数次向前播放,第奇数次向反方向播放(animation-iteration-count取值大于1时设置有效)
animation-play-staterunning,可以通过该值将暂停的动画重新播放,这里的重新播放不是从元素动画的开始播放,而是从暂停的那个位置开始播放,paused,暂停播放
animation-fill-mode默认情况下,动画结束后,元素的样式将回到起始状态,animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值:none(默认,回到动画没开始时的状态。),forwards(动画结束后动画停留在结束状态),backwords(动画回到第一帧的状态),both(根据animation-direction轮流应用forwards和backwards规则)
<body>
    <div class="box"/>
</body>
<style>
.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}
</style>

当鼠标移入的时候暂停,移出的时候继续变换颜色

transform

首先要注意的是transform属性是静态属性,只要写进style里就会直接显示生效,不会出现动画过程 通过使用transform属性,能够对元素进行移动(translate)、缩放(scale)、旋转(rotate)、翻转(skew),更多详细参数可以参考CSS3 transform 属性

总结

区别transitionanimation
是否能自动执行不能,需要事件触发,比如hover
能否重复发生不能,除非在一次触发
能否包含多个状态不能,只有开始和结束状态能,比如从0% 到100%,任意指定过渡状态
能否暂停不能,一次性能,比如hover事件触发暂停
能否定义速度曲线
能否定义某个属性值过渡

参考文章

CSS动画 animation与transition
CSS动画中的transition和animation

关于我

原文链接:juejin.im

上一篇:vue-cli创建的项目中的gitHooks原理解析
下一篇:浅谈background-size

相关推荐

  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    9 天前
  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    12 天前
  • 🔥 2020年从基础到进阶,测试你有多了解 JavaScript,刷新你的知识!🚀

    【译】JavaScript 进阶问题列表 从基础到进阶,测试你有多了解 JavaScript,刷新你的知识 答案在问题下方的折叠部分,点击即可展开问题。 1. 输出是什么? A: Lydi...

    3 个月前
  • 高级前端知识点汇总

    高级前端知识点汇总 1.首屏加载优化 2.搜索引擎优化(SEO) 3.请求优化 4.Vue服务器端渲染 (SSR) 5.W3C标准 6.vue render优化...

    2 个月前
  • 面试知识点之javascript中变量与函数重名规则

    声明 相信大家都知道变量提升,函数提升,可重名的时候又是如何处理? 试问一下2个场景的输出值分别多多少? 情景一 情景二 答案是两个场景输入都是一样的.结果都为: ...

    2 个月前
  • 面试必备!webpack 中那些最易混淆的 5 个知识点

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。

    10 个月前
  • 面试专题总结:Vue 知识总结

    简介 希望读者依此构建自己的知识树(思维导图) 偷懒一下:可参考我自己总结思维导图 : 点这里 附带:高频面试题积累文档。 来自于(学长、牛客网等平台) 自己开发的博客地址:zxinc520.co...

    6 天前
  • 面向校招 HTTP与前端缓存知识点总结

    一. 基础概念 HTTP 特点 简单快速:请求服务时,只需传送请求方法和路径 灵活:允许传输任意类型的数据对象,由 ContentType 标记 无连接:服务端处理完请求就断开连接 无状态:意味着每...

    1 个月前
  • 面向对象关键知识点汇总

    先来了解一些基础概念,才能更好的理解知识。 对象的定义 ECMA262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。 数据属性 4个特性 以上属性一般通过Objec...

    1 年前
  • 需要知道的JS的日期知识,都在这了

    为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客(https://github.com/qq449245884/xiaozhi),一年百来篇优质文章等着你! JS...

    9 个月前

官方社区

扫码加入 JavaScript 社区