CSS3初体验之绘制可爱太阳

时间：2015-09-08

一、CSS3 animation 简介

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。由织梦模板网提供HTML5+CSS3教程。下面我们一起先来看看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;/*定义动画方式*/
}

三、CSS3 animation实例应用

实例动画CSS样式：

实例动画HTML代码：

上一条：CSS3 animation 属性实例应用 下一条:纯javascript+CSS3制作精美时钟

CSS3初体验之绘制可爱太阳

相关文章

最新文章