最近写网页时才发现原来css3的动画效果感觉还不错哦!但自己以前学的时候却没有当作重点,现在从新学习一下:

1:原理:

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间

2:@keyframes规则:

@keyframes animationname {/*animationname为动画的名称*/
keyframes-selector {/*keyftames-selector为动画时长百分比,值为从0~100%*/
css-styles;
}
}

  但是目前浏览器都不支持 @keyframes 规则。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

3:使用animate将动画与元素绑定:

css的animate的具体操作参考文档   http://www.w3school.com.cn/cssref/pr_animation.asp

 div
{
animation:mymove 5s infinite;/*infinite表示重复无限次*/
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

4:W3school里给了这样一个例子:http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4,但是这样一个例子仅仅教会怎么用,但如何才能用它做出好看的效果呐?接下来介绍一些动画库,这些动画库做了许多好看的动画,并且大多都有源码,看这些动画库的目的主要还是学习人家怎么做的!不可完全套用

4.1animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现

查看演示:https://daneden.github.io/animate.css/

github地址:https://github.com/daneden/animate.css

使用时直接将animate.css引入,然后元素类名设为animate + 动画名称即可,或用JQuery为元素添加类名

4.2magic.css

查看演示:

http://www.17sucai.com/pins/demoshow/10001

github地址:

https://github.com/miniMAC/magic

使用时直接将magic.css引入,然后元素类名设为magictime + 动画名称即可,或用JQuery为元素添加类名

4.3Effeckt.css

查看演示:

http://www.gbtags.com/gb/linkviewer/3147.htm

4.4.hover.css

查看演示:

http://ianlunn.github.io/Hover/

github地址:

https://github.com/IanLunn/Hover

4.辨析transform

transform的含义是:改变,使变形,转换,

属性有rotate()(旋转) / skew()(倾斜) / scale()(比例) / translate()(位移)并且还有x,y轴之分

区别在于动画可以循环,而transform只执行一次

5  :javascript操作动画:

可以通过动画使样式以一定的速率逐渐变化。如果要实现移动的动画效果,则可以对被设定为position:absolute的元素的left属性进行渐变。如果要实现淡入淡出的效果,则可以逐渐改变元素的透明度opacity的值。

为了使样式可以以一定的速率逐渐变化,自然就需要让javascript定期执行,set Interval能够定期执行javascript函数,css3也可,推荐css3实现

 1 <div id = "foo" style = "position:absolute">This is a sample.</div>
2 <script>
3 var elem = document.getElementById('foo');
4 var frame = 0;
5 setInterval(function(){
6 frame+=1;
7 elem.style.left = frame*10+'px';
8 },100);//每经过100毫秒将向右移动10px
9 </script>

6:JQuery辅助操作动画

JQuery不仅提供了一些更改样式的简单方法,还准备了不少能够在执行动画的同时更改样式的方法。这些方法常常能够接受以下参数:duration(动画持续时间),easing(动画加速度),以及动画结束时的处理方式(callback)

方法 说明 方法 说明
hide 隐藏元素 show 显示元素
toggle 切换元素的隐藏状态 fadeln 对元素执行淡入效果
fadeOut 对元素执行淡出效果 fadeToggle 如果元素被隐藏则淡入,否则淡出
fadeTo 将元素不透明度渐变为opacity参数 slideDown 向下滑动元素
slideUp 向上滑动元素 slideToggle 如果元素被隐藏则向下滑动,否则向上滑动
animate 将元素的css变为props的状态 stop 停止动画
queue 取得队列 dequeue 去除队列中的第一个元素并执行
delay 以duration为时间暂停队列的处理    

7:JQuery之animate()方法自定义动画

7.1 语法

 $(selector).animate({params},speed,callback);
/*必需的 params 参数定义形成动画的 CSS 属性。*/
/*可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。*/
/*可选的 callback 参数是动画完成后所执行的函数名称。*/

7.2 实例:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head> <body> <button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html> 

7.3  animate的用法很多,并且默认地,jQuery 提供针对动画的队列功能

7.4 停止动画stop() 关闭动画  JQuer.fx.off属性值设为false

css3--js-jq动画效果的更多相关文章

  1. JS/JQ动画效果

    1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...

  2. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  3. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  5. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  6. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  7. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  8. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  9. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  10. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

随机推荐

  1. Hive安装与应用过程

    1.  参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2.  安装环境说明 2.1.  环境说明 ...

  2. Visualizing MNIST with t-SNE, MDS, Sammon’s Mapping and Nearest neighbor graph

    MNIST 可视化 Visualizing MNIST: An Exploration of Dimensionality Reduction At some fundamental level, n ...

  3. maven 安装与配置最佳实践

    配置Maven环境变量 1.新建 maven home 环境变量      变量名:M2_HOME     变量值:D:\ProgramFiles\apache-maven-3.5.4       2 ...

  4. sql 内连接 子查询 合并查询

    -- 内连接:-- 显示员工姓名.工资和公司所在地 select e.ename, e.sal, d.dname from emp e,dept d; -- 笛卡尔积 select e.ename, ...

  5. 在Windows Server 2012中打开传统的磁盘管理界面

    在“运行”中输入diskmgmt.msc即可

  6. leetcode题解之分解字符串域名

    1.题目描述 A website domain like "discuss.leetcode.com" consists of various subdomains. At the ...

  7. Oracle EBS 应收发票取值

    SELECT ct.trx_number ,ctl.description ,fnd_flex_ext.get_segs('SQLGL' ,'GL#' ,gcc.chart_of_accounts_i ...

  8. [OPENSSL下载][证书] OPENSSL将PFX证书转换为PEM格式

    OpenSSL Convert PFX Convert PFX to PEM openssl pkcs12 -in certificate.pfx -out certificate.cer -node ...

  9. 转:线程Thread (1)

    引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threading命名空间的类构建 3.1.1异步调用线程 3.1.2并发问题 3.1.3线程同步 3. ...

  10. Linux架构之简述企业网站简述

    简述企业网站 用户  --> 负载均衡服务器(Nginx)  ->根据扩展名访问不同的服务区 ->访问数据库 ->返回用户          静态服务器&&动态 ...