CSS3动画制作
CSS3动画制作
- rotate 绕中心旋转
- fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
- fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
效果如下：
详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3动画制作</title>
<style>
.container {
width: 200px;
margin: 0 auto;
} .redbox {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
} .bluebox {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
} .orangebox {
width: 100px;
height: 100px;
background-color: orange;
margin: 50px auto;
}
/*!
2015.03.21 Nelson Kuang
*/ .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
} /*
@creator: Nelson Kuang
@name: rotate 绕中心旋转
@usage: <div class="rotate infinite animated">Example</div>
*/
@-webkit-keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
} to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} @keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
} to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} .animated.rotate {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-duration: 4s;
animation-duration: 4s;
} /*
@creator: Nelson Kuang
@name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
@usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
*/
@-webkit-keyframes fadeInPendingFadeOutUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 25% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 75% {
/*pending*/
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} @keyframes fadeInPendingFadeOutUp {
0% {
opacity: 0;
} 25% {
opacity: 1;
} 75% {
/*pending*/
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} .animated.fadeInPendingFadeOutUp {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: fadeInPendingFadeOutUp;
animation-name: fadeInPendingFadeOutUp;
}
/*
@creator: Nelson Kuang
@name: fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
@usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInUp2D">Example</div>
*/
@-webkit-keyframes fadeInUp2D {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
} @keyframes fadeInUp2D {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
} .animated.fadeInUp2D {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: fadeInUp2D;
animation-name: fadeInUp2D;
}
</style>
</head>
<body>
<div class="container">
<div class="redbox infinite rotate"></div>
<div class="bluebox fadeInPendingFadeOutUp"></div>
<div class="orangebox fadeInUp2D"></div>
</div>
<script>
var objs = document.querySelectorAll(".container>div");
for (var k = 0, length = objs.length; k < length; k++) {
objs[k].onclick = function () {
var This = this; removeClass(This, 'animated'); setTimeout(function () { addClass(This, 'animated'); }, 100);
}
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!hasClass(obj, cls)) {
obj.className = obj.className.replace(/(^\s*)|(\s*$)/g, "");
obj.className += " " + cls;
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} </script>
</body>
</html>
CSS3动画制作的更多相关文章
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
- CSS3动画制作的简单示例
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- css3动画制作工具
1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 使用transform和transition制作CSS3动画
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- CSS3咖啡制作全过程动画
CSS3咖啡制作全过程动画是一款利用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅. 源码:http://www.huiyi8.com/sc/8788.h ...
- 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
随机推荐
- 前端应当了解的Web缓存知识
缓存优点 通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...
- win7系统下python安装numpy，matplotlib，scipy和scikit-learn
1.安装numpy,matplotlib,scipy和scikit-learn win7系统下直接采用pip或者下载源文件进行安装numpy,matplotlib,scipy时会遇到各种问题,这是因为 ...
- js之认识闭包
本文采用5W1H分析法来看一下闭包. 一.why-----从为什么要引入闭包先来了解一下闭包. 讨论为什么要引入闭包就要先讨论一下js中的作用域链及垃圾回收机制. 熟悉js语言的人都知道js中有作用域 ...
- php多线程操作同一文件-待续
同意文件操作同意文件的问题在于逻辑有些地方不合适,如果多个线程同时写入,在不加锁的情况下,可能导致得到结果不如意,为了安全,和脏读(数据库的词),应该使用排他锁,这就意味着每次只能被一个线程操作.其他 ...
- Java Bean、POJO、 Entity、 VO 、PO、DAO
Java Bean.POJO. Entity. VO , 其实都是java 对象,只不过用于不同场合罢了. Java Bean: 就是一个普通的Java 对象, 只不过是加了一些约束条件. 声 ...
- MyBK
- Google Code Jam 2016 Round 1B B
题意:给出两个数字位数相同,分别中间有若干位不知道,用问号表示.现在要求补全这两个数字,使得差值的绝对值最小,多解则取第一个数字的值最小的,再多解就取第二个数字最小的. 分析: 类似数位dp,但是很多 ...
- Reverse Core 第三部分 - 21章 - Windows消息钩取
@author: dlive @date: 2016/12/19 0x01 SetWindowsHookEx() HHOOK SetWindowsHookEx( int idHook, //hook ...
- sh5.while 脚本练习
脚本编程: 顺序结构 选择结构 if, case 循环结构 for,while,until while循环:适用于循环次数未知的场景 语法: while CONDITION;do statement ...
- Centos7无法上网
详情参照步骤:http://www.cnblogs.com/yxyht/p/5063505.html