井井客

搜索

预设css3动画库推荐Animate.css

Animate.css是一款不错的预设CSS3动画库,它可以用更加快捷的方式使你的页面达到华丽丽的效果。

预设css3动画库推荐Animate.css

效果虽然丰富多样,但同时积体也大起来了。不过对样式熟的童鞋,可以根据自己的需求,提取自己需要的模板,必竟那么多款样式,并不是每款都有用到的~

而且因为CSS3本身兼容性就比较弱,所以animate.css也无法兼容所有浏览器,目前IE678是不支持的。

1、animate.css的用法

(1)引入animate.css样式文件

<link rel="stylesheet" href="animate.min.css">

(2)给指定的元素加上指定的动画样式名

<div class="animated bounceOutLeft"></div>

需要注意的是这里面有两个样式名,其中animated是必须的,相当于指定这里需要使用animate.css中的动画,后一个bounceOutLeft则相当于提供的动画名称

(3)接下来的案例中用到的添加动画名称的样式,其实是通过jQuery来实现的,你也可以使用JQ来为指定元素,如:

$(选择器).addClass(样式名);

看一下实例吧,效果是不是很酷!

官方地址:http://daneden.github.io/animate.css/

2、提取需要的animate.css模块

其实animate.css的代码还是比较容易的,跟大多数CSS3写法一样,通过@keyframes命名了一个动画过程,再定义一个样式,调用这个过程,而兼容方面前缀只有-webkit-。

比如我想用jello这个名字的动画,直接看下面的代码吧。(我的步骤基本上是先下载好未压缩版的animate.css样式文件,然后在文件中搜索jello这个名字,找到相应的代码段)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>扣出animate.css动画代码</title>
<style>
body { text-align:center;}
span { font-size:40px;}
/********************* 代码开始 *********************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
/********************* 代码结束 *********************/
</style>
</head>
<body>
	<span class="animated jello">这是我的测试文本</span>
</body>
</html>

有个需要注意的地方就是这种类似的动画,block元素的宽度需要注意,因为旋转什么的都有一个中心点,让元素的中心点保持在最中间能让动画效果很好的呈现。这里我就直接使用内联的元素了。

文章TAG:css3

作者:井井客整理来源:互联网
本文标题:预设css3动画库推荐Animate.css
本文链接:/c/23132.html

上一篇:修改highstock默认颜色生成红绿K线图
下一篇:利用jQuery给表单元素添加删除disabled和readonly属性

文章分类

相关阅读

随便看看