【前言】
如何在网页中实现动画效果？
- 动态图片
- Flash
- JavaScript
【小知识】
CSS变形是一些效果的集合，如平移、旋转、缩放、倾斜效果
变形函数： translate()：平移 div:hover{transform:translate(10px,10px)}
scale()：扩大 div:hover{transform:scale(10)}
rotate():旋转 div:hover{transform:rotate(-30deg)}
skew():倾斜 div:hover(transform:skew(-30deg)}
过渡
第一个参数： 鼠标触及时自动变长
<style>
div{background:red;
width:50px;
height;50px;
transition:width 2s ease-in-out
}
div:hover{width:100px}
</style>
</head>
<body>
<div>111</div>
</body>第二个参数：
过渡动画函数（transition-timing-function）:指定浏览器的过渡速度，以及过渡期间的进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease:速度由快到慢（默认值）
linear:速度恒速（匀速运动）
ease-in:速度越来越快（渐显效果）
ease-out:速度越来越慢（渐稳效果）
ease-in-out:速度先加速再减慢（渐显渐稳效果）
第三个参数：当鼠标触及时延迟3秒图形开始变化
长和宽共同变化
动画使用过程：animation
<style>
@Keyframes BruceLi {
0%{ width:0;}
33%{ width:30px;}
66%{ width:150px;}
100%{ width:0;
}
div{
background:red;
width:50px;
height:50px
}
div:hover{
animation:BruceLi 3s
}
</style>
</head>
<body>
<div>111</div>
</body>