CSS动画 可以取代js动画 在移动端会更加流畅！

下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！

首先我们需要创建一个@keyframes规则

  1. @keyframes name{
  2. 	from{width:1px}
  3. 	to{width:100px}
  4. }
  5. //或者使用百分比
  6. @keyframes name{
  7. 	0%{width:1px}
  8. 	100{width:100px}
  9. }

创建好之后，我们需要在css选择器里引用我们写的规则，

  1. <div class="box1"></div>
  1. .box1{
  2. 		width: 0px;
  3. 		height: 100px;
  4. 		background-color: #00FF7F;
  5. 		/* 引用 / 捆绑*/
  6. 		animation: first 2s;
  7. 	}
  8. @keyframes first{
  9. 		0%{width:1px}
  10. 		100{width:100px}
  11. 	}

效果图：

当然我们除了改变宽度width 还可以改变其他的属性：height、定位、移动、旋转、缩放等你所能想到的css属性

css3动画属性非常多，我感觉常用的是animation的简写形式和一个动画周期需要花费的时间animation-duration;

以下也是一个小的实例：

  1. <div class="horse"></div>
  1. html,
  2. body {
  3. 	height: 100%;
  4. }
  6. .horse {
  7. 	width: 128px;
  8. 	height: 128px;
  9. 	background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
  10. 	background-size: 100% 100%;
  12. 	transform: scaleX(-1);
  13. 	animation: bounce 0.1s infinite;
  14. }
  16. @keyframes runhorse {
  17. 	0% {
  18. 		transform: translate(0, 0);
  19. 		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  20. 	}
  22. 	25% {
  23. 		transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
  24. 		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  25. 	}
  27. 	50% {
  28. 		transform: translate(calc(100vw - 129px), calc(100vh - 200px));
  29. 		 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  30. 	}
  32. 	75% {
  33. 		transform: translate(0, calc(100vh - 128px)) scaleX(-1);
  34. 	}
  36. 	100% {
  37. 		transform: translate(10px, 10px) translate3d(0, -4px, 0);
  38. 	}
  39. }
  41. body:hover .horse {
  42. 	animation: runhorse 2s linear infinite;
  43. }

效果图：



没考虑小马的头的方向，只是写了旋转的效果，很多css属性都可以用到动画效果里。可以参考~



推荐使用animate.css

①下载 animate.css

官方地址：animate.css

②或者

直接进入animate.css 随后右键另存为即可使用

③ 直接在页面顶部head标签通过link引入

基本模板如下：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6. 		<title>动画</title>
  7. 		<link rel="stylesheet" href="css/animate.css">
  8. 		<style>
  9. 			.demo1{
  10. 				font-size: 30px;
  11. 				font-weight: bold;
  12. 				color: #00008B;
  13. 			}
  14. 		</style>
  15. 	</head>
  16. 	<body>
  17. 		<div class="demo1 animated zoomIn infinite">
  18. 			Anyw3c
  19. 		</div>
  20. 	</body>
  21. </html>

效果如下：

接下来，就是对animate.css运动的一个小总结，虽然不多，但是归类后方便后面查找！

/按官网顺序/

　①Attention seekers

  • bounce 轻轻跳跃一下（弹跳；弹起，反跳；弹回）
  • flash 闪烁两次（使闪光；反射）
  • pulse 慢慢放大，然后回缩（跳动，脉跳）
  • shake 左右轻晃几次
  • swing 以中间顶部为中心小幅度晃动
  • tada 很调皮的一个小晃动，ps：只能这么描述了
  • wobble 大幅晃动，地动山摇

　②Bouncing Entrances

  • bounceIn 正中央，从无到有，轻轻抖动几次
  • bounceInDown 从右侧进来，无到有，轻轻抖动几次
  • bounceInLeft 雷同，但是一定要注意大小写“专业点叫驼峰式”
  • bounceInRighr
  • bounceInUp
  • bouncing Exits
  • bounceOut 正中央，从有到无，轻轻抖动几次消失
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRighr
  • bounceOutUp

　③Fading Entrances

  • fadeIn 跟上面bounceIn还是有些区别的，毕竟不抖
  • fadeInDown 逐渐从上面down下来
  • fadeInDownBig逐渐从上面down下来，但是跟上面那位有稍微区别，加了big后起始位置是从设备外进来的
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightNig
  • fadeInUp
  • fadeInUpBig 用up测试下big吧
  • fading Exits
  • fadeOut 恰与fadeIn相反
  • fadeOutDown 逐渐从上面down下去消失，你确定不玩玩big了？
  • fadeOutDownBig逐渐从上面down下去，但是跟上面那位有稍微区别，加了big后终点位置是从设备外
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightNig
  • fadeOutUp
  • fadeOutUpBig

    　/以下这些都是常用的哦！/

　④Flippers

  • flip 一个夸张的放大饭庄缩小效果
  • flipInX 沿中心水平轴小幅度反转出来
  • FlipInY 沿中心竖直轴小幅度反转出来
  • flipOutX 沿中心水平轴小幅度反转消失
  • FlipOutY 沿中心竖直轴小幅度反转消失

　⑤Lightspeed

  • lightSpeedIn 字面意思就是光速出来喽，记得调快速度哦，什么，怎么调速我没说么？好吧，先留个坑，待会儿补。

  • lightSpeedOut 光速消失

    ⑥Rotating Entrances

  • rotateIn 准确说是以正中心点180度旋转渐显

  • rotateInDownLeft 没错，就是以左上角为中心点转下来

  • rotateInDownRight 就是以右上角为中心点转下来

  • rotateInUpLeft 就是以左上角为中心点转上去

  • rotateInUpRight 就是以右上角为中心点转上去

  • rotating Exits

  • rotateOut 准确说是以正中心点180度旋转渐隐

  • rotateOut DownLeft

  • rotateOut DownRight

  • rotateOut UpLeft

  • rotateOut UpRight

　⑦Sliding Entrances

  • slideInUp 这个slide感觉就有点鸡肋了，有了上边的Lightspeed、fadeIn，就会看出这个的弊端，动作幅度太小
  • slideInDown
  • slideInLeft
  • slideInRight
  • sliding Exits
  • slideOutUp 表现依旧不好
  • slideOutDown
  • slideOutLeft
  • slideOutRight

　⑧Zoom Entrances

  • zoomIn 牢记哦，正中央出来的，做效果是最棒了
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoom Exits
  • zoomOut 牢记哦，正中央消失的，配合上面的zoomIn做效果是最棒了
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

　⑨Specials

  • hinge 悬挂，颤抖，掉下去
  • rollIn 从左侧旋转进入
  • rollOut 向右侧旋转消失

    　　到此呢，整个animate.css里的所有动作效果规整完毕。回上边去填坑！！

　　算了，还是在这里填吧，若想用到延时加载和控制运动过渡时间，就必须要用到jquery了，所以我们先去找个jq引入到页面底部

　Demo如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link rel="stylesheet" href="css/animate.css" />
  8. <style type="text/css">
  9. .test{
  10. position: absolute;
  11. width: 100px;
  12. font-size: 50px;
  13. top: 50px;
  14. left: 50%;
  15. margin-left: -50px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="animated rollIn test">test</div>
  21. <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24. 　　$('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
  25. })
  26. </script>
  27. </body>
  28. </html>

使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！

  1.  参考文章：

电子猫

CSS3动画animation认识，animate.css的使用的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  5. Ionic3学习笔记（五）动画之使用 animate.css

    本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...

  6. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  7. 第五章 动画 44：动画-使用第三方animate.css类库实现动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  9. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

随机推荐

  1. 携程PMO--如何召开卓有成效的回顾会

      话题介绍   回顾会提供团队反思迭代过程并提出改进措施的机会.回顾会是团队成员共同进行的协作活动,让团队成员跟进并落实改进措施,使团队在下一个冲刺中更高效,这是相当重要的.   我们给出了回顾会的 ...

  2. helm安装kafka集群并测试其高可用性

    介绍 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据. 这种动作( ...

  3. Liunx学习总结(九)--防火墙

    防火墙的作用 防火墙作为一个边界防御工具,其监控流量要么允许它.要么屏蔽它. 多年来,防火墙的功能不断增强,现在大多数防火墙不仅可以阻止已知的一些威胁.执行高级访问控制列表策略,还可以深入检查流量中的 ...

  4. Java集合框架之TreeMap浅析

    Java集合框架之TreeMap浅析 一.TreeMap综述: TreeMap在Map中的结构如下:

  5. BZOJ2152 聪聪可可 （点分治）

    2152: 聪聪可可 题意: 在一棵边带权的树中,问任取两个点,这两个点间的权值和是3的倍数的概率. 思路: 经典的点分治题目. 利用点分治在计算所有路径长度,把路径长度对3取模,用t[0],t[1] ...

  6. CodeForces 293E Close Vertices 点分治

    题目传送门 题意:现在有一棵树,每条边的长度都为1,然后有一个权值,求存在多少个(u,v)点对,他们的路劲长度 <= l, 总权重 <= w. 题解: 1.找到树的重心. 2.求出每个点到 ...

  7. FZU oj Problem 2082 过路费

                                                                                    Problem 2082 过路费 Pro ...

  8. 福建工程学院16级第一周寒假作业E题----第七集，奇思妙想

    第七集,奇思妙想                                                                                            ...

  9. 牛客第五场多校 A gpa 分数规划（模板）

    链接:https://www.nowcoder.com/acm/contest/143/A来源:牛客网 Kanade selected n courses in the university. The ...

  10. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...