你的位置:首页 > 网页设计

[网页设计]css3 animation动画特效插件的巧用


  这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/

  下载 animate.css文件,文件的代码很多,不过要明白那是很多特效的CSS样式,如果只使用到其中的一两个特效,可以选择性的复制。

首先是公共的样式:

.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;}

.animated定义了动画的持续时间;
.animated.infinite定义了循环动画,如果只要求播放一次就不需要添加该样式

下面是每个特效的样式,举几个例子:
  • 弹跳特效 bound
@-webkit-keyframes bounce { from, 20%, 53%, 80%, to {  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0); } 40%, 43% {  -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  -webkit-transform: translate3d(0, -30px, 0);  transform: translate3d(0, -30px, 0); } 70% {  -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  -webkit-transform: translate3d(0, -15px, 0);  transform: translate3d(0, -15px, 0); } 90% {  -webkit-transform: translate3d(0,-4px,0);  transform: translate3d(0,-4px,0); }}@keyframes bounce { from, 20%, 53%, 80%, to {  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0); } 40%, 43% {  -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  -webkit-transform: translate3d(0, -30px, 0);  transform: translate3d(0, -30px, 0); } 70% {  -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);  -webkit-transform: translate3d(0, -15px, 0);  transform: translate3d(0, -15px, 0); } 90% {  -webkit-transform: translate3d(0,-4px,0);  transform: translate3d(0,-4px,0); }}.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom;}

在html页面使用,可以对文字、图片等其他元素使用,下面的效果是一张持续跳动的图片

<img src="returnTop.png" class="animated infinite bounce">

  • 闪烁特效 flash
@-webkit-keyframes flash { from, 50%, to {  opacity: 1; } 25%, 75% {  opacity: 0; }}@keyframes flash { from, 50%, to {  opacity: 1; } 25%, 75% {  opacity: 0; }}.flash { -webkit-animation-name: flash; animation-name: flash;}

  • 摇摆特效 swing
@-webkit-keyframes swing { 20% {  -webkit-transform: rotate3d(0, 0, 1, 15deg);  transform: rotate3d(0, 0, 1, 15deg); } 40% {  -webkit-transform: rotate3d(0, 0, 1, -10deg);  transform: rotate3d(0, 0, 1, -10deg); } 60% {  -webkit-transform: rotate3d(0, 0, 1, 5deg);  transform: rotate3d(0, 0, 1, 5deg); } 80% {  -webkit-transform: rotate3d(0, 0, 1, -5deg);  transform: rotate3d(0, 0, 1, -5deg); } to {  -webkit-transform: rotate3d(0, 0, 1, 0deg);  transform: rotate3d(0, 0, 1, 0deg); }}@keyframes swing { 20% {  -webkit-transform: rotate3d(0, 0, 1, 15deg);  transform: rotate3d(0, 0, 1, 15deg); } 40% {  -webkit-transform: rotate3d(0, 0, 1, -10deg);  transform: rotate3d(0, 0, 1, -10deg); } 60% {  -webkit-transform: rotate3d(0, 0, 1, 5deg);  transform: rotate3d(0, 0, 1, 5deg); } 80% {  -webkit-transform: rotate3d(0, 0, 1, -5deg);  transform: rotate3d(0, 0, 1, -5deg); } to {  -webkit-transform: rotate3d(0, 0, 1, 0deg);  transform: rotate3d(0, 0, 1, 0deg); }}.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing;}

 

还有很多animation 动画特效,可以在 animate.css 网站查看,每一个特效的名字刚好也是 样式定义的类名、动画帧名,可以一一对应。这可以在该网站下载最新版的 animate.css文件。

 

温馨提示:animation 是css3的特性,支持的是最新的主流浏览器,上述插件是 支持-webkit内核的浏览器,如果想支持其他的最新浏览器,请自行添加相应浏览器供应商前缀的动画帧。