演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
#box{
width: 100px;height: 100px;background-color: red;
margin: 100px auto;
/* 绑定动画 */
animation: wyzx 5s;
}
/* @keyframes用于创建一个动画 */
@keyframes wyzx{
/* from动画开始元素样式 */
from{
width: 100px;height: 100px;background-color: red;
}
/* to动画结束元素样式 */
to{
width: 200px;height: 200px;background-color: green;
}
}
</style>
</head>
<body>
<!--
动画:改变元素样式给元素添加动画
-->
<div id="box"></div>
</body>
</html>
