<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animation动画</title>
<style>
/*keyframe 关键帧名称{
from|to|百分比{
属性1:属性值1；
属性2:属性值2；
属性3:属性值3；
}
}
上面的语法格式中，from|to|百分比用于定义关键帧的位置，其中from代表开始处；to代表动画结束帧；百分比则指定关键帧的出现位置。例如
10%代表关键帧出现在动画进行了1/10时间处。一个关键帧定义可以包含多个关键帧。
CSS3为Animation提供了以下几个属性
animation-name:指定动画名称。该属性指定一个已有的关键帧定义
animation-duration:指定动画的持续时间
animation-timing-function:指定动画的变化速度
animation-delay:指定动画延迟多长时间才开始执行
animation-interation-count：指定动画的循环执行次数
*/
/*定义一个关键帧*/
@-webkit-keyframes 'aaa'{
/*定义动画开始处的关键帧*/
0%
{
left:100px;
}
/*定义动画进行到40%时的关键帧*/
40% {
left:200px;
}
/*定义动画进行到60%*/
60% {
left:300px;
}
/*定义动画进行到100%的关键帧*/
100% {
left:100px;
}
}
/*为div定义CSS样式*/
div {
background-color:#dd2038;
100px;
height:100px;
border:2px solid #000000;
position:absolute;
left:100px;
}
/*为鼠标悬停的div元素定义CSS样式*/
div:hover {
/*指定执行fkjava动画*/
-webkit-animation-name:'aaa';
/*指定动画的持续时间*/
-webkit-animation-duration:5s;
/*指定动画的循环次数为*/
-webkit-animation-interation-count:1;
}
</style>
</head>
<body>
<div>鼠标悬停，开始动画</div>
</body>
</html>