入门css3动画

共计 418 个字符，预计需要花费 2 分钟才能阅读完成。

入门 css3 动画
为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性
css3 动画分为两类
1. 过渡动画 transition(从一个状态变为另一个状态)
eg: 一个 div 宽高都为 100px，鼠标移上后变为宽高各 300px
“`
div {
width: 100px;
height: 100px;
}
div:hover {
width: 300px;
height: 300px;
}
“`
这时候我们就可以用到过渡动画
“`
div {
width: 100px;
height: 100px;
transition: width 3s, height 3s;
}
“`

2. 关键帧动画 keyframes(一个动画定义多个关键帧，实现更为复杂的动画)
定义一个关键帧动画
// 关键帧的书写很灵活，一行可以写多个关键帧
@keyframes 动画名 {
0% {…}
…
/** 时间点 元素状态 **/
…
100% {…}
}
将关键帧动画绑到元素上，需要使用 animation 属性