动画是基于 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>