<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>Css，Animaction动画</title>
<meta charset="UTF-8">
<title>Css，Animaction动画</title>
<style type="text/css">
.frame {
width: 200px;
height: 200px;
background: yellow;
}
/*
定义帧
从动画开始From
中间
动画结束to
* */
@-webkit-keyframes frames {
from {
background: red;
}
20% {
background: yellow;
}
50% {
background: blue;
}
to {
background: black;
}
}
/*
当鼠标触动的时候
通过：animation: 5s frames alternate-reverse;添加动画
* */
.frame:hover{
animation: 5s frames alternate-reverse;
}
</style>
.frame {
width: 200px;
height: 200px;
background: yellow;
}
/*
定义帧
从动画开始From
中间
动画结束to
* */
@-webkit-keyframes frames {
from {
background: red;
}
20% {
background: yellow;
}
50% {
background: blue;
}
to {
background: black;
}
}
/*
当鼠标触动的时候
通过：animation: 5s frames alternate-reverse;添加动画
* */
.frame:hover{
animation: 5s frames alternate-reverse;
}
</style>
</head>
<body>
<div class="frame"></div>
</body>
</html>