这一个是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:;
} 25%, 75% {
opacity:;
}
} @keyframes flash {
from, 50%, to {
opacity:;
} 25%, 75% {
opacity:;
}
} .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内核的浏览器,如果想支持其他的最新浏览器,请自行添加相应浏览器供应商前缀的动画帧。
animate.css文件网盘下载:https://pan.baidu.com/s/1sl6c1uX
css3 animation动画特效插件的巧用的更多相关文章
-
jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
-
css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
-
CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
-
css3的动画特效--动画序列(animation)
首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...
-
css3的动画特效--元素旋转(transition,animation)
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...
-
CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
-
9种jQuery和css3图片动画特效代码演示
1.*旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
-
css3的动画特效--元素旋转
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...
-
css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
-
禁用mac Command w
事情是这样的:历经各种调查,终于定位到了一个bug,正在我准确Command + 数字 切换下iterm2的窗口时,让我懵逼的事情发生了,我们终端不见了,对不见了.心里万马奔腾啊.什么鬼?原来自己误按 ...
-
lucene开发序之luke神器
lucene是一款很优秀的全文检索的开源库,目前最新的版本是lucene4.4,关于lucene的历史背景以及发展状况,在这里笔者就不多介绍了,如果你真心想学习lucene,想必在这之前你已经对此作过 ...
-
Linux UGO和ACL权限管理
自主访问控制(Discretionary Access Control, DAC)是指对象(比如程序.文件.进程)的拥有者可以任意修改或者授予此对象相应的权限.Linux的UGO(User, Grou ...
-
UITableViewCell上面添加UIWebView
首先创建一个webView对象和 private var webViewcell : UIWebView? 在viewDidLoad里面设置创建webViewcell,设置属性并用kvo监听webVi ...
-
WPF的架构分析
首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们学习. 创建一个WPF需要引用的 ...
-
Python读写txt文件时的编码问题
这个问题来自于一个小伙伴,他在处理中文数据时需要先把里面的文本过滤然后分词,因为里面有许多符号,不仅是中文标点符号,还有✳,emoji等奇怪的符号. 正常情况下,中文的str经过encode('utf ...
-
读书笔记 C#委托的BeginInvoke、EndInvoke之浅析
c#中有一种类型叫委托,它是一种引用类型.可以引用静态与非静态的方法,且这些方法的参数列表和返回值类型必须与所声明的委托一致. 委托引用的方法可以通过BeginInvoke和EndInvoke来异步进 ...
-
linux php.ini文件没有指向 不生效
phpinfo下查看: 命令行下查看 :php -i | grep "Loaded Configuration File" 解决: 使用命令去追踪错误: strace /usr/ ...
-
Gradle安装和在IDEA使用 基本操作
阅读目录 简单介绍 安装 使用idea创建一个web的Gradle项目 如何进行打包 解释build.gradle和settings.gradle 有关gradle的jar冲突 本地jar包位置和修改 ...
-
python scipy stats学习笔记
from scipy.stats import chi2 # 卡方分布from scipy.stats import norm # 正态分布from scipy.stats import t # t分 ...