最典型的 一个 例子就是当鼠标移入时进行一些动画 效果 ：
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< title > Transition </ title >
<!-- 中文 渐变色的CSS库 -->
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/chi nes e-gradient " >
<!-- 中文 布局的CSS库 -->
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/chi nes e-layout " >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
ul {
/* 网格布局 */
dis play : grid ;
/* 引入了chi nes e-layout这个库，所以可以用 中文 */
grid : var ( --六宫格 ) ;
/* 间距10px */
gap : px ;
/* 给个宽高 */
width : px ;
height : px ;
/* 清除 默 认样式 */
list-style : none ;
}
li {
/* 引入了chi nes e-gradient这个CSS库，所以可以用 中文 */
background : var ( --怦然心动 ) ;
/* 过渡 属性 ，有了这个 属性 才会有过渡 效果 */
transition : transform s ;
}
li :hover {
/* 鼠标移入时进行放大 */
transform : scale ( ) ;
}
</ style >
</ head >
< body >
< ul >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
< li > </ li >
</ ul >
</ body >
</ html >运行结果：
此时用过渡动画既简单方便， 效果 又好。
不过眼尖同学可以发现CSS里面居然可以写 中文 ，这是怎么回事呢？
原来是因为我们引入了 一个 CSS库来美化了我们的样式：
渐变色官方文档： https://www.yuque.com/vue-sharp/xflqsh/yxn4m7 布局官方文档： https://www.yuque.com/vue-sharp/oco0rf/ded6m5
其实你在大部分网站看到的一些交互动画都是过渡动画，这么一看感觉好像帧动画没什么优势啊。
其实不然，接下来我们将用Css Sprite来让大家见识一下帧动画的厉害之处。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100554