本文介绍了Web前端中CSS3实现动画的三种主要方式：transition渐变动画，transform转变动画，以及animation自定义动画。通过示例详细讲解了各类型的属性和用法，帮助初学者理解并掌握CSS3动画的实现技巧。
css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。
transition渐变动画
我们先看一下transition的属性：
- property:填写需要变化的css属性如：width,line-height,font-size,color等,所有作用与dom样式的属性;
- duration:完成过渡效果需要的时间单位(s或者ms)
- timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）
timing-function具体的值可以看下面的表格：
| 值 | 描述 |
|---|---|
| linear | 匀速（等于 cubic-bezier(0,0,1,1)） |
| ease | 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 慢慢变快（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 慢慢变慢（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 先变快再到慢（等于 cub |
扫一扫
6806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
