目前在CSS3中使用动画效果有两种途径：
transition 和 animation
1.transition
主要属性：
transition-delay 过渡动画延迟时间
transition-duration 过渡动画持续时间
transition-timing-function:linar 过渡变化曲线图
实例：
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin TransitionCSS_Test</title>
<style type="text/css">
p{
width:100px;
height:100px;
background-color:antiquewhite;
}
p:hover{
/* 指定动作 */
width:200px;
height:200px;
background-color: #50f06a;
transition-delay: 200ms;
/* CSS3.0新增属性， 过渡效果-延时 */
transition-duration:500ms;
/* 过渡效果-变化过程持续时间 （目前几乎新版的浏览器的都支持，但考虑到用户可能会使用老版本的浏览器，建议使用带上前标的transition） */
/* -webkit-transition-duration:500ms; */
/* -webkit- 表示适用于 Google 和 safari 浏览器 */
/* -o-transition-duration:500ms; */
/* -o- 表示 opera 浏览器 */
/* -moz-transition-duration:500ms; */
/* -moz- 表示 火狐浏览器 */
transition-property:background-color,width,height;
/* 表示需要进行过渡效果的属性 */
transition-timing-function:linar ;
/* 属性值linar,ease ,ease-in ,ease-out,ease-in-out 分别对应贝塞尔曲线不同的曲线变化效果 */
}
</style>
</head>
<body>
<body>
<p></p>
</body>
</body>
</html>
实现效果图：
2.animation
主要属性：
animation-duration 一次动画从开始到结束持续多长时间
animation-delay 延迟多少时间开始动画
animation-name 动画名
animation-iteration-count 设置动画播放次数，属性值为 infinite 表示无限次重复播放该动画
animation-direction: alternate 设置动画播放方式，属性值为 alternate 表示animation正反向交替运行
etc…
实例：（变大缩小动画 to…from ）
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin AnimationCSS_Test</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover {
/* 指定动作 */
animation-duration: 1000ms;
animation-delay: 200ms;
animation-name: MelanceXin;
/* 这里MelanceXin为动画名 */
animation-iteration-count: infinite;
/* 属性值为 infinite 表示无限次重复播放该动画 */
animation-direction: alternate;
/* 属性值为 alternate 表示animation正反向交替运行 */
}
@keyframes MelanceXin
/* 定义对应动画名的动画 */
{
to {
width: 200px;
height: 200px;
background-color: #ffad2a;
}
from {
width: 100px;
height: 100px;
background-color: #40a1ce;
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
实现效果图：
实例2：（在animation 中设立多个断点）
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin AnimationCSS_Test</title>
<style type="text/css">
p{
width:100px;
height:100px;
background-color:antiquewhite;
}
p:hover{
/* 指定动作 */
animation-duration:2000ms;
animation-delay:200ms;
animation-name:MelanceXin;
/* 这里MelanceXin为动画名 */
animation-iteration-count:2;
/* 属性值为 1. infinite 表示无限次重复播放该动画 2.数字，表示重复的次数 */
animation-direction:alternate;
/* 属性值为 alternate 表示animation正反向交替运行 */
}
@keyframes MelanceXin
/* 定义对应动画名的动画 */
{
from{
width:100px;
height:100px;
background-color:#fffec3;
}
50%{
width:120px;
height:200px;
background-color:#3b88ff;
}
75%{
width:200px;
height:120px;
background-color:#7fe444;
}
to{
width:200px;
height:200px;
background-color:#ffad2a;
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
实现效果图：
动画和过渡效果的区别：
1.动画必须完整整次，如果是执行一次，结束时会回到最初始状态。
2.过渡动画则不用，过渡效果结束时会停在设定的状态上。
3.动画效果使用比较复杂，需要用到一个名为animation-name的属性