这篇文章主要介绍了CSS3动画之DIY Loading动画的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称；规定动画的时长。
css3动画属性
Loading动画1：
点.gif
/*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
/*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
/*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转换方法
一个简单的小球动画，鼠标移到小球上或者空白框内，小球开始做动画，鼠标移出，动画停止。
小球动画
.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动画
/*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-600) 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; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是CSS3动画之DIY Loading动画的详细内容，更多请关注0133技术站其它相关文章！
