Atitti css transition Animation differ区别
Atitti css transition Animation differ区别
1.1. transition的优点在于简单易用,但是它有几个很大的局限。 1
1.1. transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
1.2. 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.3. Velocity 和 GSAP jQuery anim.
两个最常用的javascript动画库是 Velocity.js 和 GSAP。这些库在使用jQuery的时候并没有性能损耗,因为它们都没有使用jQuery的动画栈。
这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和CSS差不多,而且操作更方便。
但事实是基于javascript的动画效果通常和基于css的动画一样快,有些甚至更快一些。CSS动画通常被觉得比较快,因为我们总是拿它和jQuery动画相比,其实慢的是jQuery的$.animate(),然而javascript的动画库避免了DOM操作,常常比jQuery快20倍左右。
Jqa 比较好的anim库了...检索累挂在的库,新不上啊...
【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区别的更多相关文章
- Atitti css transition Animation differ区别
Atitti css transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限. 1 1.2. Transition ...
- css transition & animation
transition 支持:IE10+ img{ transition: 1s 1s height ease; } transition-property: 属性transition-duration ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器
css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论 前端开发最要命的事就是处理浏览器的兼容性问 ...
随机推荐
- linux下安装oracle
一>1.关闭防火墙,禁用selinux vi /etc/selinux/config 修改SELINUX=disabled,然后重启,如果不想重启使用命令setenforce 0 2.安装依赖 ...
- Taylor定理证明
下图,单独打开查看 当n->inf时如果 Rn(c)趋0, c属于(a,x), 那么在区间(a,x) 内函数在a点生成的taylor级数收敛到函数f.
- SQL一致性错误修复SQL
USE master; ); SET @databasename = 'BenlaiTask'; ALTER DATABASE BenlaiTask SET SINGLE_USER WITH ROLL ...
- 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance
提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...
- Thinkphp内置截取字符串函数
Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截 ...
- 通过uCGUIBulider4.0建立的ucGUI文件,控件汉字不能显示问题解决办法
由于uCGUIBulider4.0不能在64位操作系统中运行,于是在电脑上通过VMware Workstation Pro搭建虚拟的32位的win7环境,然后把win7中用uCGUIBulider4. ...
- Mysql 插入部分字段问题
1. 字段如果不设置auto_increment和default的值,是不允许插入表的. 2. insert into student(id, name) values("1", ...
- 如何利用word2013写图文并茂的博客
我有一天心血来潮,突然想写博客了,由于是技术贴,图文并茂,多图预警,可是在新浪博客,网易博客,博客园这些博客上写技术贴,似乎都不支持从已经写好的word文档里粘贴过去,于是各种百度各种尝试各种摸索 ...
- VIM使用(三)
Vim自动补全神器:YouCompleteMe Ubuntu下,先通过Bundle安装插件: Bundle 'Valloric/YouCompleteMe'Bundle 'scrooloose/syn ...
- 在已有 Xcode 项目中 加入Cordova框架
转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但 ...