首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称；规定动画的时长。
css3动画属性
Loading动画1：
点.gif
<!-- html代码 总共8个点 --> <div class="point-loading"> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> </div>
/*css样式代码*//*定义动画*/@keyframes pointLoading {
0% { transform: scale(1); opacity: 1;
}
100% { transform: scale(.3); opacity: 0.5;
}
}/*定义样式*/.point-loading { width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top: 150px; margin-bottom: 100px;
}.point-loading .point { width: 20px; height: 20px; border-radius: 50%; background: lightgreen; position: absolute; animation-name:pointLoading; /*绑定动画*/
animation-duration:1s; /*绑定动画完成一个周期所用时间*/
animation-iteration-count:infinite; /*动画播放次数 默认是1，infinite无限次播放*/}/*nth-child:选择器匹配属于其父元素的第 N 个子元素；animation-delay:动画延迟播放*/.point-loading .point:nth-child(1) { left: 0; top: 50%; margin-top: -10px; animation-delay: 0.13s;
}.point-loading .point:nth-child(2) { left: 14px; top: 14px; animation-delay: 0.26s;
}.point-loading .point:nth-child(3) { left: 50%; top: 0; margin-left: -10px; animation-delay: 0.39s;
}.point-loading .point:nth-child(4) { top: 14px; right: 14px; animation-delay: 0.52s;
}.point-loading .point:nth-child(5) { right: 0; top: 50%; margin-top: -10px; animation-delay: 0.65s;
}.point-loading .point:nth-child(6) { right: 14px; bottom: 14px; animation-delay: 0.78s;
}.point-loading .point:nth-child(7) { bottom: 0; left: 50%; margin-left: -10px; animation-delay: 0.91s;
}.point-loading .point:nth-child(8) { bottom: 14px; left: 14px; animation-delay: 1.04s;
}Loading动画2：
圆环.gif
<!-- html代码 --><div class="loading"></div>
/*css代码*//*首先是定义动画效果*/@keyframes rotateLoading { from { transform:rotate(0deg);
}
100% { transform: rotate(360deg);
}
}/*定义基本样式，绑定动画，定义动画属性*/.loading { margin: 50px auto; width: 100px; height: 100px; border-radius: 50%; border: 10px solid rgba(0, 0, 0, 0.2); border-top-color: #000; position: relative; animation-name: rotateLoading; animation-timing-function: linear; animation-duration: 1.1s; animation-iteration-count: infinite;
}Loading动画3：
柱状.gif
<!--html代码 共5个柱状 --> <div class="pillar-loading"> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> </div>
/*css代码*/@keyframes pillarLoading {
0%,
100% { background: lightgreen;
}
50% { transform: scaleY(1.75); background: lightblue;
}
}.pillar-loading { margin: 150px auto; width: 60px; display: flex; justify-content: space-between;
}.pillar-loading .pillar { width: 8px; height: 40px; border-radius: 4px; background: lightgreen; animation-name: pillarLoading; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: ease;
}.pillar-loading .pillar:nth-child(2){ animation-delay: 0.2s;
}.pillar-loading .pillar:nth-child(3){ animation-delay: 0.4s;
}.pillar-loading .pillar:nth-child(4){ animation-delay: 0.6s;
}.pillar-loading .pillar:nth-child(5){ animation-delay: 0.8s;
}以上3个动画是Animation动画的简单示例。
下面再说一个动画必备属性 transform。
transform 本意是变形，变换之意，在 CSS 中使用该属性可对元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。因其有着各种特效及优良的性能，所以成为动画的标配。
** 转换方法**
transform转换方法
一个简单的小球动画，鼠标移到小球上或者空白框内，小球开始做动画，鼠标移出，动画停止。
小球动画
<!-- html代码 --><div class="box"> <div class="circle"></div> </div>
.box { width: 600px; height: 200px; border: 1px solid #ccc; background: #fff; margin: 50px,auto
}.circle { width: 50px; height: 50px; background: blue; border-radius: 50%; margin: 75px,0; transition: all 2s /*2s完成*/}.box:hover .circle { background: red; transform: translate(550px,0) /*沿x轴偏移550px*/}再来一个稍微难一点的。
transform动画
<!-- html代码 --><a href="https://y.qq.com/n/yqq/album/002JRl3m16wLPL.html" class="playlist-item"> <div class="item-bd"> <img class="item-img" src="http://coding.imweb.io/img/p3/transition-hover.jpg" alt=""> <i class="icon-play"></i> </div> <div class="item-ft"> <h3 class="item-tt">漂洋过海来看你 OST 原声辑</h3> <p class="item-author">严艺丹</p> </div> </a>
/*css样式代码*/.playlist-item { display: block; margin-top: 100px; width: 300px; background: rgba(0, 0, 0, .6);
}.playlist-item:hover { background: #31c27c;
}.playlist-item .item-bd { overflow: hidden; position: relative;
}.playlist-item .item-img { width: 100%; transition:all 0.75s;
}.playlist-item .icon-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.7); width: 70px; height: 70px; background: url(http://coding.imweb.io/img/p3/transition-cover_play.png) no-repeat; opacity: 0;
}.playlist-item .item-bd:hover .item-img { transform:scale(1.1);
}.playlist-item .item-bd:hover .icon-play { opacity: 0.8; transform: translate(-50%, -50%) scale(1);
}.playlist-item .item-ft { color: #fff; padding: 15px 10px; text-align: center;
}.playlist-item .item-tt { font-size: 16px; position: relative; display: inline-block; vertical-align: middle;
}.playlist-item .item-tt::after { content: "..."; width: 18px; height: 18px; font-size: 12px; color: #fff; border-radius: 50%; border: 2px solid #fff; position: absolute; right: -25px; top: 50%; transform: translate(0, -50%); line-height: 0.6; box-sizing: border-box; opacity: 0; transition:all 0.75s;
}.playlist-item .item-author { color: #999;
}.playlist-item:hover .item-author { color: #c1e9d5;
}.playlist-item:hover .item-tt::after { opacity:1;
}
作者：西瓜很甜哟
链接：https://www.jianshu.com/p/6f53cc7d8b88
随时随地看视频
