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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 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 定界符格式引起的错误
2011/05/24 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
vue如何判断dom的class
2018/04/26 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python中常见的数据类型小结
2015/08/29 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python3字符串操作总结
2019/07/24 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
Linux机考试题
2015/10/16 面试题
2014年党建工作汇报材料
2014/11/02 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS