css3动画制作？CSS动画
大家好，今天给各位分享css3动画制作的一些知识，其中也会对CSS动画进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
css3 实现动画效果,怎样使他无限循环动下去
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo{
0%{
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear;
margin:100px;
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
CSS3 的动画的意义何在
让你的页面动画在移动设备上运行更快。这是一个有趣的话题。这也是移动互联网前端工程师关心的问题。
我们都知道JavaScript效率低下的两个主要原因：操作DOM和使用页面动画。浏览器上的动画效果并不比客户端容易。通常情况下，我们会通过频繁的CSS操作来实现视觉动画效果。在DOM和CSS的频繁操作，浏览器将不停止执行重排和重绘，在浏览器的PC版的浏览器，因为可用的内存比较大，用户肉眼是动画网页制作的油漆和回流几乎看不见，所以工程师不用过多考虑性能问题的动画了。但在移动设备上可以有移动设备浏览器的不同分布（内置浏览器）内存不能PC浏览器的内存分配相当的版本，称iPhone Safari的内存只有10M，但一个外国工程师事实上，iPhone 3GS被分配到他旅行的记忆只有6m。
而Android是分配给浏览器的内存更是不确定的，无论是iPhone或Android或WindowPhone上或黑莓，没有官方的文件说，系统自带的浏览器占据了大部分的记忆，所以上述存储器中的数据是不确定的。目前，对CSS3的最佳支持Webkit的浏览器。在WebKit内核浏览器，苹果的Safari和谷歌的Chrome浏览器应该黑莓。
前端工程师知道CSS3提供了大量的新功能，包括二维、三维动画的特点，在这讨论的其他特点，我们讨论了目前的CSS3动画的意义。
使用CSS3动画：不占用js主线程；可以利用硬件加速；浏览器可以优化动画（不是在元素可见的时候，而不是动画，并减少对FPS的影响）。
如何用纯CSS3制作进度条
1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。
2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill和.bar-fill的span标签。
<divclass="container">
<divclass="titleplain">Plain</div>
<divclass="bar">
<spanclass="bar-unfill">
<spanclass="bar-fill"></span>
</span>
</div>
</div>3.简单的进度条的CSS代码.container类里将width定义为30%使进度条能够自适应。放一些简单的border-radius之类的属性在我们的.title类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container{
width:30%;
margin:0auto
}
.title{
background:#545965;
color:#fff;
padding:15px;
float:left;
position:relative;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px
}4.首先建一个白色的背景
.bar-unfill{height:15px;display:block;background:#fff;width:100%;border-radius:8px}5.定义进度条的样式，先令他的宽度为100%，因为这也会应用于定义和未定义的部分。所以在我们的.bar-fill的类里，令他的宽度为0作为起始的宽度，添加CSS3的transition属性使动画效果更加流畅，最后，我们将添加CSS3里的animation属性，定义动画的名字，和duration和animation-iteration-count属性。
.bar-fill{
height:15px;
display:block;
background:#45c9a5;
width:0;
border-radius:8px;
-webkit-transition:width.8sease;
-moz-transition:width.8sease;
transition:width.8sease;
-webkit-animation:progressbar7sinfinite;
animation:progressbar7sinfinite
}6.使用CSS3里的@keyframe规则来设置宽度从0变化到100%。你也能定制你自己喜欢的变化。
@-webkit-keyframesprogressbar{
from{
width:0
}
to{
width:100%
}
}
/*Standardsyntax*/
@keyframesprogressbar{
from{
width:0
}
to{
width:100%
}
}7.条纹进度条，应该把.bar-fill重新命名为.bar-fill-stripes。使用backgrou-image属性里的linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes{
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2)25%,transparent25%,transparent50%,rgba(255,255,255,.2)50%,rgba(255,255,255,.2)75%,transparent75%,transparent);
-webkit-transition:width.8sease;
-moz-transition:width.8sease;
transition:width.8sease;
-webkit-animation:progressbar7sinfinite;
animation:progressbar7sinfinite
}追踪
<divclass="container">
<divclass="title">Tracker</div>
<divclass="bar">
<spanclass="bar-unfill">
<spanclass="bar-fill-tracker"></span>
<spanclass="track-wrap">
<spanclass="track"></span>
</span>
</span>
</div>
</div>8.最后产生动画效果
.track-wrap{
position:relative;
top:-18px;
-webkit-animation:progressbar27sinfinite;
animation:progressbar27sinfinite
}
.track{
height:20px;
display:block;
background:#e74c3c;
width:20px;
border-radius:10px;
position:relative;
left:-12px
}
@-webkit-keyframesprogressbar2{
from{
left:0
}
to{
left:100%
}
}
/*Standardsyntax*/
@keyframesprogressbar2{
from{
left:0
}
to{
left:100%
}
}
如果你还想了解更多这方面的信息，记得收藏关注本站。