一。css3中animation动画各种属性详解：

animation

Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] ]*

animation-timing-function：

定义动画的速度曲线

ease：动画以低速开始，然后加快，在结束前变慢。

linear：匀速

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀

step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。

step-end：按keyframes设置逐帧显示，第一帧为样式的初始值。

steps(<number>[, [ start | end ] ]?)：把keyframes里设置的一帧等分为几帧，start为第一次显示第一帧，end第一次显示样式的初始值，例如：steps(4,start)

cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果

animation-iteration-count

动画迭代次数，默认就1次，可以设置2次，3次，4次，…infinite表示无限

animation-duration

指一个动画周期持续时间。单位秒s或毫秒ms.

animation-delay

指动画延时执行时间。单位秒s或毫秒ms.

animation-direction

指动画时间轴上帧前进的方向。

normal:默认值，表示一直向前，最后一帧结束后回到第一帧

reverse:与normal的运行方向相反

alternate:往前播放完了之后，然后再倒带，倒带到头了再往后播放

alternate-reverse:与alternate的运行方向相反

animation-fill-mode

设置动画结束后的状态

none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态

forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧

backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）

both：设置对象状态为动画结束或开始的状态，结束时状态优先

animation-play-state

paused:设置该属性使动画暂停

running:设置该属性使动画继续播放

动画运行状态，暂停或继续播放，属性为：running（默认）以及paused. 这个什么时候有用的，使用animation实现视频播放效果的时候

二。demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.box{
width: 100%;
padding: 3%;
box-sizing: border-box;
overflow: hidden;
}
.box .loader{
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border:1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes loading-1{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
.loading-1{
width: 35px;
height: 35px;
position: relative;

}
.loading-1 i{
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
background: linear-gradient(transparent 0%,transparent 70%, #333 30%,#333 100%);
-webkit-animation: loading-1 0.6s linear 0s infinite;
}
@-webkit-keyframes loading-2{
0%{
transform: scaleY(1);
}
50%{
transform: scaleY(0.5);
}
100%{
transform: scaleY(1);
}
}
.loading-2 i{
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 0 2px;
background-color: #ccc;
}
.loading-2 i:nth-child(1){
-webkit-animation:loading-2 1s ease-in 0.1s infinite;
}
.loading-2 i:nth-child(2){
-webkit-animation:loading-2 1s ease-in 0.2s infinite;
}
.loading-2 i:nth-child(3){
-webkit-animation:loading-2 1s ease-in 0.3s infinite;
}
.loading-2 i:nth-child(4){
-webkit-animation:loading-2 1s ease-in 0.4s infinite;
}
.loading-2 i:nth-child(5){
-webkit-animation:loading-2 1s ease-in 0.5s infinite;
}
@-webkit-keyframes loading-3{
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity:1;
}
}
.loading-3{
position: relative;
}
.loading-3 i{
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-color: #CCCCCC;

}
.loading-3 i:nth-child(1){
top:25px;
left: 0px;
-webkit-animation: loading-3 1s ease 0s infinite;
}
.loading-3 i:nth-child(2){
top:17px;
left: 17px;
-webkit-animation: loading-3 1s ease -0.12s infinite;
}
.loading-3 i:nth-child(3){
top:0px;
left:25px;
-webkit-animation: loading-3 1s ease -0.24s infinite;
}
.loading-3 i:nth-child(4){
top:-17px;
left:17px;
-webkit-animation: loading-3 1s ease -0.36s infinite;
}
.loading-3 i:nth-child(5){
top:-25px;
left: 0px;
-webkit-animation: loading-3 1s ease -0.48s infinite;
}
.loading-3 i:nth-child(6){
top:-17px;
left: -17px;
-webkit-animation: loading-3 1s ease -0.6s infinite;
}
.loading-3 i:nth-child(7){
top:0px;
left:-25px;
-webkit-animation: loading-3 1s ease -0.72s infinite;
}
.loading-3 i:nth-child(8){
top:17px;
left:-17px;
-webkit-animation: loading-3 1s ease -0.84s infinite;
}

</style>
<body>
<div class="box">
<div class="loader">
<div class="loading-1">
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</body>
</html>

css3实现的3中loading动画效果的更多相关文章

  1. CSS3实现加载中的动画效果

    本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...

  2. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  3. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  4. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  5. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  6. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  8. 实现loading动画效果

    下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutabl ...

  9. ios开发之简单实现loading动画效果

    最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...

随机推荐

  1. IE10、IE11 User-Agent 网站无法写入Cookie 问题[转]

    你是否遇到过当使用一个涉及到Cookie操作的网站或者管理系统时,IE 6.7.8.9下都跑的好好的,唯独到了IE10.11这些高版本浏览器就不行了?好吧,这个问题码农连续2天内遇到了2次.那么,我们 ...

  2. 百度CDN 网站SSL 配置

    百度CDN SSL配置步骤 一般从SSL提供商购买到的证书是CRT二进制格式的. 1. 将 CRT 导入到IIS中, 然后从IIS中导出为PFX格式 2. 下载openssl,执行下面命令 提取用户证 ...

  3. java 22 - 20 多线程之线程池

    程序启动一个新线程成本是比较高的,因为它涉及到要与操作系统进行交互. 而使用线程池可以很好的提高性能,尤其是当程序中要创建大量生存期很短的线程时,更应该考虑使用线程池. 线程池里的每一个线程代码结束后 ...

  4. hdu 1166

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. 类集-collection接口

    类集就是一个动态的对象数组,与一般的对象数组不同,类集的对象类容可以随意扩充. 1,对象数组使用的时候会存在一个长度的限制,那么类集是专门解决这种限制的.使用类集可以向数组增加任意多的数据. 2,对象 ...

  6. HTML 学习笔记 JavaScript（事件）

    事件流: 事件流: 描述的是从页面中接收事件的顺序 也可以理解为事件在页面中传播的顺序: 事件: 就是用户或浏览器自身执行的某种动作 例如 click(点击) load(加载) mouseover(鼠 ...

  7. HTML 学习笔记 CSS3 (多列)

    CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局. 在这篇文章中 你将了解到如下多列属性: column-count column-gap column-rule 浏览器支持: 多列的属 ...

  8. Jersey the RESTful Web Services in Java

    Jersey 是一个JAX-RS的实现, JAX-RS即Java API for RESTful Web Services, 支持按照表述性状态转移(REST)架构风格创建Web服务. REST 中最 ...

  9. 2795: [Poi2012]A Horrible Poem

    2795: [Poi2012]A Horrible Poem Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 484  Solved: 235[Subm ...

  10. poj1190

    生日蛋糕 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18230 Accepted: 6491 Description 7月1 ...