正文

简单CSS3动画制作

IP云
IP云V管理员/0 阅读
06/20
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html

最近需要用到了一些CSS3动画，基本用Animate.css（https://github.com/daneden/animate.css）可以处理，但按需也要扩展了一些动画如下：

@charset "UTF-8";
/*!
2015.03.21 Nelson Kuang
Animate.css扩展动画
*//*
@creator: Nelson Kuang
@name: rotate 绕中心旋转
@usage: <div class="rotate">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);
}
}.rotate {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}/*
@creator: Nelson Kuang
@name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
@usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
*/
@-webkit-keyframes fadeInPendingFadeOutUp {
0% {
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 25% {
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 75% {
/*pending*/
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}@keyframes fadeInPendingFadeOutUp {
0% {
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 25% {
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 75% {
/*pending*/
opacity:;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}.animated.fadeInPendingFadeOutUp {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
/*
@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:;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}@keyframes fadeInUp2D {
from {
opacity:;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}.fadeInUp2D {
-webkit-animation-name: fadeInUp2D;
animation-name: fadeInUp2D;
}