animation和transition的区别


Posted in HTML / CSS onOctober 12, 2020

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 ></div>
</body>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

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

效果如下

animation和transition的区别

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

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

animation和transition的区别

其实写在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-direction normal 默认值,如果设置为normal时,动画每次循环都是向前(即按顺序)播放,alternate(轮流),动画播放在第偶数次向前播放,第奇数次向反方向播放(animation-iteration-count取值大于1时设置有效)
animation-play-state running,可以通过该值将暂停的动画重新播放,这里的重新播放不是从元素动画的开始播放,而是从暂停的那个位置开始播放,paused,暂停播放
animation-fill-mode 默认情况下,动画结束后,元素的样式将回到起始状态,animation-fill-mode属性可以控制动画结束后元素的样式。主要具有四个属性值:none(默认,回到动画没开始时的状态。),forwards(动画结束后动画停留在结束状态),backwords(动画回到第一帧的状态),both(根据animation-direction轮流应用forwards和backwards规则)
<body>
    <div ></div>
</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>

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

animation和transition的区别

transform

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

总结

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

以上就是animation和transition的区别的详细内容,更多关于animation和transition的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 #HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 #HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
You might like
PHP clearstatcache()函数详解
2010/03/02 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP中list方法用法示例
2016/12/01 PHP
JS中的数组的sort方法使用示例
2014/01/22 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python基于http下载视频或音频
2018/06/20 Python
详解python中的json和字典dict
2018/06/22 Python
python修改字典键(key)的方法
2019/08/05 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
大学生简历求职信
2014/06/24 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
会议通知格式范文
2015/04/15 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL