您的位置：首页 > Web前端 > CSS

CSS3动画制作

2015-11-19 13:28 633 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航