Atitti css transition Animation differ区别
Atitti css transition Animation differ区别
1.1. transition的优点在于简单易用,但是它有几个很大的局限。 1
1.2. Transition是可以自动触发的使用timeout1
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
相关文章
- CSS硬件加速
- css 更改所有text,CSS之cssText「建议收藏」
- html css制作404页面,一款纯css3实现的漂亮的404页面
- CSS(初级)笔记
- 【说站】css link和@import的区别
- 【说站】css行内元素的垂直居中
- css面试点三:清除浮动的九中方法-高度塌陷理解-伪元素使用
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 前端入门教程:CSS标准盒模型和怪异盒模型区别
- 前端必备的 CSS 库,normalize.css
- 【CSS】CSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )
- 【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )
- CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式
- CSS-绝对、相对、固定定位三者区别
- CSS-响应式布局
- HTML&CSS精选笔记_布局与兼容性详解编程语言
- CSS 下拉菜单详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 解决CSS中display与visibility的区别
- 推荐css打造经典鼠标触发显示选项
- Web2.0下XHTML+CSS设计需要注意的地方小结
- CSS规则层叠的应用css必须要注意的几点
- 在IE与FF中如何居中的css写法
- css通配符用法总结
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- 使用PHP下载CSS文件中的图片的代码