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: Example
*/
@-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结合使用 如：Example
*/
@-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结合使用 如：Example
*/
@-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>