纯javascript CSS教程3制作精美时钟
纯javascript CSS教程3制作精美时钟。该实例主要应用了CSS教程3中transform属性（translate、rotate）、border-radius属性。
- 此篇文章具体介绍如下
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。CSS教程3的Animation就是由“keyframes”这个属性来实现这样的效果。由织梦模板网提供hTML5 CSS教程3教程。下面我们一起先来看看Keyframes:
浏览器支持：
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css教程的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
二、具体属性实例详解： .demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
animation-duration: 10s;/*动画持续时间*/
animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
animation-delay: 2s;/*动画执行延迟时间*/
animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
animation-direction: alternate;/*定义动画方式*/
}
三、CSS教程3 animation实例应用
实例动画CSS教程样式：
<style type="text/css教程">.box{
animation:fly 5s linear 2s infinite alternate;
-webkit-animation:fly 5s linear 2s infinite alternate;
position:absolute;
top:100px;
left:20%;
background:#F00;
width:100px;
height:100px;
}
@keyframes fly { 0% {
top:100
}
50% {
top:140px
}
100% {
top:100
}
}
@-webkit-keyframes fly { 0% {
top:100
}
50% {
top:140px
}
100% {
top:100
}
}
</style>
实例动画hTML代码：
<div class="box"></div>,CSS3,animation,属性,实例,应用,CSS教程3分步详解：transform属性
近来，hTML5和CSS教程3的发展速度还是很可观的，国内外不乏一些大站，酷站都在使用最新的技术。面对新的技术，我们该如何正确的把握和使用到今后的项目实战中呢？针对这一问题，浩子决定剖析CSS教程3，一一像各位同学解答CSS教程3到底是个神马东西。就已transform开始吧，写的不好的话，请严重拍砖！！
