本貼已重新編輯至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: <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: 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結合使用 如：<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);} }.fadeInUp2D {-webkit-animation-name: fadeInUp2D;animation-name: fadeInUp2D; }

?

轉載于:https://www.cnblogs.com/fastmover/p/4370480.html

總結

以上是生活随笔為你收集整理的简单CSS3动画制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。