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://www.cnblogs.com/attilax/

Atiend

Atitti css transition Animation differ区别的更多相关文章

  1. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  2. css transition & animation

    transition 支持:IE10+ img{ transition: 1s 1s height ease; } transition-property: 属性transition-duration ...

  3. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  4. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  5. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  6. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  7. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  8. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  9. css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

随机推荐

  1. CreateFile() 打开u盘 物理设备

    //以下是用的vs2010 windows7 64 管理员权限编译成功的 HANDLE hDev = CreateFile(TEXT("\\\\.\\PhysicalDrive1" ...

  2. jfinal框架页面找不到相关css,js文件404

    在JFinalConfig中添加配置: @Override public void configHandler(Handlers handlers) { handlers.add(new Contex ...

  3. ubuntu gcc-5 安装

    安装了一个ubuntu 15.10,没有集成vim,很失望,先安装个vim,sudo apt-get install vim. 开始获取g++-5: $ sudo add-apt-repository ...

  4. 在Xcode 6 beta里编译Cocos2d-x iOS项目时失败

    转载 在Xcode 6 beta里编译Cocos2d-x iOS项目时可能会失败,提示如下错误: Undefined symbols for architecture i386: "_fwr ...

  5. (最小路径覆盖) News 消息传递 (hust OJ 2604)

    http://begin.lydsy.com/JudgeOnline/problem.php?id=2604   Description 总部最近打算向下面的N个工作人员发出了一条秘密消息.因为它是机 ...

  6. boost的编译

    第1步: 先从官网(www.boost.org)下载最新版的BOOST源码,如图所示 我这里下的是zip的那个第2步:编译源代码(放心.这里是傻瓜式的操作,很容易操作)(1)先把源代码放在E盘,例如 ...

  7. 解决ie8(及其以下)不支持getElementsByClassName的问题

    这篇技术笔记与大家分享的是:解决IE8(及以下)不支持getElementsByClassName的方法.如果有说错的地方,麻烦留言告诉我,我及时更正,一来是更新一下我的认知,二来也是不要误导的他人, ...

  8. C++多态(一)

    面试题目中关于多态的问题不少,例如重载.虚函数(覆盖).多态的概念等等,这里做一个梳理,包含如下内容: 一.多态的定义 (一)定义 能够呈现不同形态的特性或状态. (二)两种多态性 1.编译时的多态性 ...

  9. IOS开发——使用数据库

    IOS开发——使用FMDB数据库 简介 需求作用: 如果需要保存大量的结构较为复杂的数据的时候,使用数据库,例如交规考试项目 1.数据库的基本介绍 数据库(DB)是一种数据模型组织起来并存放存储管理的 ...

  10. LNMP 部署

    一.防火墙配置 CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.servic ...