Atitti css transition Animation differ区别
Atitti css transition Animation differ区别
1.1. transition的优点在于简单易用,但是它有几个很大的局限。 1
1.2. Transition是可以自动触发的使用timeout1
1.3. js 动态改变 style 内容 ,样式覆盖 2
1.4. Velocity 和 GSAP2
1.1. transition的优点在于简单易用,但是它有几个很大的局限。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
1.2. Transition是可以自动触发的使用timeout
<script>
window.setTimeout(function()
{
console.log("--add cls");
$("#u").addClass("big");
},500);
window.setTimeout(function()
{
console.log("--add cls2");
$("#r").addClass("big2");
},1000);
1.3. js 动态改变 style 内容 ,样式覆盖
var style = document.getElementById("dynamic")
style.innerHTML = '@-webkit-keyframes myfirst{50% {background: '+color+';} }\n'
+ '@keyframes myfirst {50% {background: '+color+';}}'
var tt=document.styleSheets[0];
tt.deleteRule(6);//清除之前写入的动画样式console.log(tt);
tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}",6);//写入样式
keyframes之所以是复数,就是因为它里面还包含很多子样式keyframe
keyframe相当于普通CSS样式的rule,所以keyframe对象才有 style 属性,可以用来进行修改
1.4. Velocity 和 GSAP
两个最常用的javascript动画库是 Velocity.js 和 GSAP。这些库在使用jQuery的时候并没有性能损耗,因为它们都没有使用jQuery的动画栈。
这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和CSS差不多,而且操作更方便。
但事实是基于javascript的动画效果通常和基于css的动画一样快,有些甚至更快一些。CSS动画通常被觉得比较快,因为我们总是拿它和jQuery动画相比,其实慢的是jQuery的$.animate(),然而javascript的动画库避免了DOM操作,常常比jQuery快20倍左右。
【CSS3】transition过渡和animation动画 - 季诗筱的博客 - 博客频道 - CSDN.NET.html
javascript - js如何动态修改@keyframes相关值? - SegmentFault.html
css - JavaScript怎么修改@keyframes - SegmentFault.html
放弃使用jQuery实现动画 - A5创业网.html
作者:: 绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 )
汉字名:艾提拉(艾龙), EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
Atiend
Atitti css transition Animation differ区别相关推荐
- css transition animation
transition 支持:IE10+ img{transition: 1s 1s height ease; } transition-property: 属性 transition-duration ...
- [css] transition、animation、transform三者有什么区别?
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
- css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法
到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic- ...
- CSS transition 的默认值
语法 transition: property duration timing-function delay|initial|inherit; 示例: div {width: 100px;height ...
- 利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- css 旋转 animation动画
css 旋转 animation动画 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- 用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
- CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
- html中定义动画anima,css中animation怎么用
css中animation怎么用 animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,可以让很多其它CSS属性产生动画效果,比如color, background-co ...
最新文章
- Android APP性能优化
- Nutch的安装和配置
- Foudation框架常用结构体和常用类
- 解决win10 .net framework 3.5安装失败0x800f081f
- SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
- 【面试总结】java测试工程师培训
- mysql索引使增删变慢_mysql优化(四)–索引
- Java案例:简易记事本
- 【电路】LM293D电机驱动芯片
- Elasticsearch Lucene 数据写入原理 | ES 核心篇
- 【数码管识别】4识别成5或7的问题
- Hello,Java!(娱乐)
- RS232接口芯片内部原理
- arcgis绘制shp文件
- Busybox中httpd、ftpd、telnetd、tftpd、ntpd的用法
- 用SPSS求均值 方差 标准差小例题
- 用python制作3d动图_怎样用Python制作好玩的GIF动图
- 机器学习——DEAP数据集
- 【macOS游戏】Cities:天际线
- 微信小程序链接生成二维码weapp-qrcode
热门文章
- 反应测试_SUPERCRC 微反应量热仪DARC差分加速量热仪 PT-DSC压力跟踪差示扫描量热仪...
- Perl篇:常用调试命令
- swift——富文本文字的简单使用
- (一)区块链的共识算法:整体介绍 及 分叉 的通俗讲解
- kylin_异常_02_java.lang.NoClassDefFoundError: org/apache/hadoop/hive/conf/HiveConf 解决办法
- 阿里云数据传输服务低价不低质,服务再升级 1
- 也谈怎么学好英语这件小事(转)
- 系统补丁安静安装参数
- MySQL-第N篇一些经验
- day_4 Selenium请求库