目录
任务描述
本关任务：用 CSS3 实现简单的小动画。效果图如下：
相关知识
为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。
创建动画
用 @keyframes来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。
需要实现的效果图如下：
基本的html结构如下：
<p>@keyframes</p>
p{ font-size: 14px}效果图如下：
先用@keyframes创建一个动画，这个动画表示字体会从20px变成40px。代码如下：
@keyframes bigfonts{
from { font-size: 20px;}
to { font-size: 40px;}
}说明：
@keyframes表示创建动画，动画名称是bigfonts；from表示这个动画的开始，to表示这个动画的结束；- 动画发生的时间也可以用百分比来表示，
0%是动画的开始，100%是动画的结束。from和to相当于0%和100%；
绑定元素
然后将动画bigfonts绑定到p元素上就可以了。代码如下：
p:hover{
animation: bigfonts 2s ease;
}效果已经实现了。这里说明一下animation的属性值：
bigfonts是动画的名称；2s是动画一次完成的时间；ease表示动画的速度曲线，动画以低速开始，然后加快，在结束前变慢。默认也是ease；
编程要求
根据提示，在右侧编辑器补充代码，实现当滑动到p元素上时，宽度从100px变为400px的效果。要求如下：
- 动画名称为
changeColor； - 动画一次完成的时间为
2s； - 动画的速度曲线为
ease-in; - 这里动画的开始，结束用
from，to；
为了方便评测， CSS 都是需要以分号;结尾的。
效果如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
margin: 100px;
width: 100px;
height: 100px;
background: orange;
}
/************* Begin ************/
/* 创建动画 */
@keyframes changeColor {
from {
width: 100px;
}
to {
width: 400px;
}
}
/*绑定元素*/
p:hover {
animation: changeColor 2s ease-in;
}
/************** End **************/
</style>
</head>
<body>
<p></p>
</body>
</html>