简单css3动画制作 -凯发k8官方网

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

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

@charset "utf-8"; /*!2015.03.21 nelson kuanganimate.css扩展动画 *//*@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);} }.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结合使用 如：

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;-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);} }.animated.fadeinpendingfadeoutup {-webkit-animation-duration: 4s;animation-duration: 4s; } /*@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);} }.fadeinup2d {-webkit-animation-name: fadeinup2d;animation-name: fadeinup2d; }

 

转载于:https://www.cnblogs.com/fastmover/p/4370480.html

总结

以上是凯发k8官方网为你收集整理的简单css3动画制作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。