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>