上周刚学了简单的css动画，我自己是比较喜欢HTML5的，无奈分班只有一个java班，是能说一句卧槽，顺便写个博客纪念一下逝去的H5，才学了两周而已。
我今天晚上讲的主要是css动画初识，以及一个小deml，小飞机的飞行动画，不是打飞机哦。分话不多说，begin。
*[CSS3动画的使用]
* 1.声明一个动画(关键帧)
* @keyframes name{
* from{}
* to{}
* }
*
* 阶段的写法：
* ① 直接使用from-to的写法；
* ②可以设置0%-100%的写法，开头和结尾必须是0%和100%
*
* 2. 在CSS选择器中使用animation属性调用关键帧；
*
* [animation缩写形式]
* animation-name:动画名称，就是我们定义的关键帧的名字；
* Animation-duration：动画持续时间
* Animation-timing-function：动画速度曲线 常选ease
* Animation-delay：动画开始的时间，延迟时间
*
* Animation-iteration-count：动画播放次数，默认为1，infinite:无限次
* Animation-direction：动画在下一个是否逆向播放，默认为normal。alternate表示下一次逆向播放(100%-0%)
* Animation-fill-mode：规定对象动画结束后停留在何种状态。要使用这个属性，动画次数必须是有限次。backwards-默认，
* 回到初始状态;forwards-停留在最后状态
*
*
* >>>>animation-name和 Animation-duration必须设置，其余属性选填
* >>>> Animation可以同时设置多个动画，之间用逗号分隔；
* animation:myFrame1 6s,myFrame2 3s;
*
下面的代码是用一个飞机图片实现飞机飞行的代码。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0 ;
margin: 0;
}
#div{
200px;
height: 100px;
background-image: url(img/feiji.jpg);
background-size: contain;
background-repeat: no-repeat;
animation: myFrame 15s ease ;
}
@keyframes myFrame{
0%{
position: absolute;
top: 0;
left: 0px;
}
25%{
position: absolute;
top: 50%;
left: 90%;
transform: rotate(0);
}
26%{
transform:rotateY(180deg);
}
50%{
position: absolute;
top:90%;
left: 0;
transform: rotateY(180deg);
}
51%{
transform: rotateY(0deg);
}
75%{
position: absolute;
top: 0;
left: 90%;
transform: rotateY(0deg);
}
76%{
transform: rotatey(180deg);
}
100%{
position: absolute;
top: 0%;
left: 0%;
transform: rotatey(180deg);
}
}
</style>
</head>
<body>
<div id="div">
</div>
</body>