一。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. shell流程控制

    if语句 判断条件用[]包裹起来 if [ $a > $b ] then echo ‘a > b’ elif [ $a < $b ] then echo ‘a < b’ els ...

  2. 理解 Linux 网络栈（3）：QEMU/KVM + VxLAN 环境下的 Segmentation Offloading 技术（发送端）

    本系列文章总结 Linux 网络栈,包括: (1)Linux 网络协议栈总结 (2)非虚拟化Linux环境中的网络分段卸载技术 GSO/TSO/UFO/LRO/GRO (3)QEMU/KVM + Vx ...

  3. [转]simple sample to create and use widget for nopcommerce

    本文转自:http://badpaybad.info/simple-sample-to-create-and-use-widget-for-nopcommerce Here is very simpl ...

  4. 失眠害死人-jQuery&AJAX

    hi 又是两天没有做事情,后悔什么的只能带来更多的后悔吧,好好做事,忘了两天前自己作出来的失眠 1.jQuery -----jQuery与AJAX-----(PS:ajax是什么请自行百度,或者看我之 ...

  5. POJ 3608 Bridge Across Islands --凸包间距离，旋转卡壳

    题意: 给你两个凸包,求其最短距离. 解法: POJ 我真的是弄不懂了,也不说一声点就是按顺时针给出的,不用调整点顺序. 还是说数据水了,没出乱给点或给逆时针点的数据呢..我直接默认顺时针给的点居然A ...

  6. POJ3013 Big Christmas Tree[转换 最短路]

    Big Christmas Tree Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 23387   Accepted: 5 ...

  7. Windows 常用 CMD 命令行介绍

    看下面的链接: http://www.jianshu.com/p/76ff5d16f113

  8. AC日记——字符串P型编码 openjudge 1.7 31

    31:字符串p型编码 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个完全由数字字符('0','1','2',…,'9')构成的字符串str,请写出str的p型编码串.例如: ...

  9. Unity Camera的两种模式

    http://www.cnblogs.com/zhaoqingqing/p/3302484.html

  10. poj[1185]炮兵阵地

    Description 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用&quo ...