CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、动画、多栏布局、媒体查询等。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。0% 是动画的开始，100% 是动画的完成。
ie9支不支持css3动画？
ie9不支持css3动画。CSS3动画对低版本的浏览器的支持效果并不是很好，特别是IE9及以下版本，更是无法支持。
所以有时候一些简单的动画效果，还只是用js代码来实现，但是效率偏低，而且效果有些偏生硬，不够顺滑。 毕竟用js代码来实现动画并非正确之道。
CSS3动画
虽说css实现动画效果看起来更顺滑一些，但是也只是相对而言，因为css3动画的也是一帧一帧的执行，由于多种因素的影响，细看之下也未必是真的顺滑，所以只要把动画设计让眼睛感觉到是顺滑的就能达到完美的效果。
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称
1、定义动画轨迹@keyframes 动画名称{
from{
动画初始状态
}
to{
动画结束状态
}
}
//---兼容写法
@-moz-keyframes
@-webkit-keyframes
@-o-keyframes
/* 使用百分比可以实现动画连续执行*/
@keyframes 动画名 {
0%{
}
50%{
}
100%{
}
}
2、调用动画animation: name duration timing-function delay iteration-count direction;animation-name动画名称
animation-duration完成动画所花费的时间
animation-timing-function规定动画的速度曲线。
inear匀速
ease低速/加快/变慢
ease-in低速开始
ease-out低速结束
ease-in-out低速开始和结束。
animation-delay动画开始之前的延迟。
animation-iteration-count动画应该播放的次数。
animation-direction是否应该轮流反向播放动画。
normal 正常播放
reverse 反向播放
alternate 奇数次正向，偶数次反向。
alternate-reverse 奇数次反向，偶数次正向
示例：
1、定义动画发生的空间
HTML代码：
2、使用@keyframes规则创建简单动画
css代码body {
background-color: #fff;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
min-width: 320px;
max-width: 500px;
}
.element {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0099cc;
border-radius: 50%;
position: relative;
top: 0;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top: 150px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
@keyframes bounce {
from {
top: 100px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
top: 50px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
top: 150px;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
75% {
top: 75px;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
3、效果图：
更多web前端知识，请查阅 HTML中文网 ！！
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
