css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效果,其实都是属性用错了。
今天用几个简单的例子做一下区分;
一 利用translate 与transition结合起来的动画;
1 transition
用来描述动画过程和时间
transition: property duration timing-function delay;
transform:
用来描述动画动作和形式
transform:translate /scale /rotate/ skew /perspective ;
因为经常用到的属性也就只有translate,所以经常将transform和translate搞混;变成 translate:transform;
例如:通常描述一个简单的动画,例如渐隐渐现
div{
width:100px;
height:100px;
background:#ececec;
opacity:0;
}
.opacity-hide{
opacity:0;
transition:opacity 0.5s ease-out;
}
.opacity-show{
opacity:1;
transition:opacity 0.5s ease-out;
}
鼠标点击时动画就是:$('div').addClass('opacity-show');
setTimeout(function(time) {
$('div').addClass('opacity-hide').removeClass('opacity-show');
}, time ? time : 1500)
这里有个基础的小注意点:
opacity:1;就是显示。opacity:0;就是隐藏。
addClass,removeClass,toggleClass 是不需要加入“.”号的!
二 利用animation的动画
animation:name duration timing-function delay iteration-count direction;
1 name:就算是用@keyframes写个动画名,这个opacitykey就是动画名。
/*@keyframes opacitykey{
0% {opacity: 0}
25% {opacity: 1}
50% {opacity: 1}
75% {opacity: 1}
100% {opacity: 0}
}
2 百分比用来控制时间分布的,就是用duration,如果是2s就是按照这个比例分下去。
3 timing-function(速度曲线):linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n);
4 delay:延迟多少时间执行;
5 iteration-count(动画播放的次数):n|infinite;
6 direction:normal|alternate(动画轮流反向播放)这个属性一般很少用
例如我写一个例如渐现渐隐动画,持续时间2s 推迟0.5s执行,并且不断执行;
.opacity-infinite {
animation:opacitykey 2s ease-out 0.5s infinite ;
-webkit-animation:opacitykey 2s ease-out 0.5s infinite ;
}
我们把它放进.opacity-infinite这个类里,这样用这个动画就很方便了;
三 jq动画用的是animate(),比较灵活 duration单位是毫秒
$('div').animate({
width:130,
height:253,
opacity:0
},{
duration:1500,
easing:'swing',
complete: callback
});
也可以特殊化制定
$('div').animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});
如果需要更多的动画效果可以引入Jquery.easing的插件
当然还有其他动画形式,列出上面几种是因为,很多情况下参数的属性都容易混淆,把他们做一下简单的分类,
如果你是在移动端的话建议css3的动画执行效果要好与jq动画和原生动画,尤其是渐隐渐现这一类的效果。
转载于:https://www.cnblogs.com/xiaojingyuan/p/6007824.html
css动画和jq动画的简单区分相关推荐
- css动画和js动画_CSS与JS动画:哪个更快?
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...
- 17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录 一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点 二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
- 【译】CSS动画 vs JS动画
原文地址 目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
- CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...
- Jq学习笔记(7)JQ动画
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会 ...
- CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转 圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
- html 天气特效,用CSS制作天气特效动画,源码分享
效果图 今天给大家带来的是CSS3动画天气图标代码,简单实用好看! CSS源码: html { box-sizing: border-box; } html *, html *:before, htm ...
- CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
- 十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
最新文章
- IDEA新建一个多maven模块工程(有图)
- python面试-马哥教育官网-专业Linux培训班,Python培训机构
- 成功解决UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 130: invalid continuation b
- PyQt:成功解决PyQt4升级到PyQt5改变的函数或方法
- 思科网络设备及配置详解,网工入门必备指南!
- 电脑开机动画_领克的开机画面,你修改了?
- 将亚型多态性与通用多态性相关联的危险
- 不使用 Cookie 的“Cookie”技术
- shellinabox基于web浏览器的终端模拟器
- /proc 文件系统并使用/proc 进行输入
- 如何在Android按钮上以编程方式设置drawableLeft?
- 1.WebServices 简介
- 【数据库】SQL中的rollup() 函数的作用?
- verilog语法基础
- python中用于进行web开发的第三方库是_10款Web开发最佳的Python框架
- k8s命令对node调度 cordon,drain,delete 区别
- 千万别在微社区太投入
- 怎么把旧iPhone上的备份迁移到新iPhone上?
- android zip解压出错,常见的压缩解压文件出错解决办法
- 如何用简单的方式将数组转成json