有时候想要的动画并不是缩小、放大或者变个颜色之类的这么简单，比如我们需要 一个 复杂的形变 加上 复杂的运动轨迹，此时过渡动画就有些相形见绌了。虽然 Canvas 或 SVG 能够实现复杂逻辑的动画 效果 ，但是毕竟不是人人都会这种技术。而且有时候开发时间有限，没有时间用 代码 来绘制 一个 炫酷动画，所以这个时候帧动画，配上Css Sprite就是 最完 美的选择。
我们用一张条形Css Sprite来试一下：
2. 过渡动画
首先使用过渡动画看看会是什么 效果 ：
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
.animate {
width : px ;
height : px ;
/* 指定背景图 */
background : url(http:https://www.jb51.cc/res/2021/11-02/11/5035ad12112b58705095585b3e794444.jpg) ;
/* 使用预先定义好的动画 */
animation : change-position s linear both ;
}
/* 定义动画 */
@keyframes change-position {
from { background-position : }
to { background-position : -px }
}
</ style >
</ head >
< body >
< div class = " animate " > </ div >
</ body >
</ html >我们需要的是一张 图片 一张 图片 的去 显示 ，也就是一帧代表一张 图片 ，我们换成帧动画再来试一下：
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
.animate {
width : px ;
height : px ;
/* 指定背景图 */
background : url(http:https://www.jb51.cc/res/2021/11-02/11/5035ad12112b58705095585b3e794444.jpg) ;
/* 使用预先定义好的动画 */
animation : change-position s steps ( ) infinite ;
}
/* 定义动画 */
@keyframes change-position {
from { background-position : }
to { background-position : -px }
}
</ style >
</ head >
< body >
< div class = " animate " > </ div >
</ body >
</ html >
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100555