动画是基于 hover 的,和过渡有相似的地方,不过就像动画这两个字,我们是通过 关键帧 (@ keyframes xx
过度里面使用 transition-xxx ,而我们使用 animation-xxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
p{
width:100px;
height: 100px;
background-color: antiquewhite;
}
/*动画动画,是以过渡为基础的故也用 hover 标签。注意了啊! 我们这里没给出长宽和高,这是我们要在动画里面做的*/
p:hover{
animation-duration: 1s; /*在上次的过渡中我们使用的是 transition-xxxx ,现在我们做动画,故使用 animation 标签*/
animation-delay: 500ms;
animation-name: 小王; /*关键,这是我们动画的名字*/
animation-iteration-count: infinite; /*动画重复无穷次,可以填数x,表示x次 */
animation-direction: alternate; /*alternate 动画是交替的 */
}
/*然后在 keyframe(关键帧)里处理*/
/*from是动画最初状态,to是动画最终状态 ,中间的百分数是指动画演到哪个阶段需要怎样动 */
@keyframes 小王 {
/*from开始,to结束*/
from{ /*开始的是130x130*/
width:130px;
height: 130px;
background-color: antiquewhite;
}
50%{/*到一半变成 160x160*/
width: 160px;
height: 160px;
background-color: #1122dd;
}
80%{
width: 180px;
height:189px;
background-color: #59ed45;
}
to{
width: 200px;
height: 200px;
background-color: #41daeb;
}
}
</style>
</head>
<body>
<p> </p>
</body>
</html>