开发者学堂课程【HTML5 新特性学习：动画】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5059
动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、 Flash 动画以及 JavaScript。
css3 keyframes 规则:
@keyframes 规则用于创建动画。在 keyframes 中规定某项 CS 样式，就能创建由当前样式逐渐改为新样式的动画效果
浏览器支持:
Internet Explorer10、Firefox 以及 Opera支持 @keyframes 规 则和 animation 属性。
Chrome 和 Safari 需要前 -webkit-
规则：
通过规定至少以下两项CSS3动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8*>
<title></title>
<style>
div{
width:100px;
height:100px;
background-color: red;
animation: myfirstAnim 3s;
-webkit-animation: myfirstAnim 3s;
}
@keyframes myfirstAnim {
from{
background: red;
{
to{
background: yellow;
}
}
@-webkit-keyframes myfirstAnim {
from{
background: red;
}
to{
background: yellow;
</style>
</head>
<body>
<div></div>
</body>
</html>
然后测试一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UtF-8">
<title></title>
<style>
div{
width:100px;|
}
height:100px;
background: red;
position: relative;
animation: myan；
}
@keyframes myanim {
0%{
background: red;
left:0px;
top:0px;
}
25%{
background: yellow;
left:200px;
top:0px;
50%{
background: blue;
left:200px;
top:200px;
75%{
background: green;
left:0px;
top:200px
}
100％}
background: green
left:0px;
top:200px
}
@-webkit-keyframes myanim {
0%{
background: red;
left:0px;
top:0px;
25%{
background: yellow;
left:200px;
top:0px;
50%{
background: blue;
left:200px;
top:200px;
75%{
background: green;
left:0px;
top:200px;
100%{
background: red;
left:0px;
top200px
} }
</style>
</head>
<body>
<div></div>
</body>
</html>
