CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法,可以做出类似于 GIF 动画的效果。

CSS3 Animation steps函数

首先看看,CSS3 animation的兼容性。可以看到基本上主流浏览器都支持了 animation 属性,chrome、safari、opera和移动端的浏览器带上前缀就可以支持。

利用雪碧图来制作动画使用了 CSS3 Animation 里面的一个重要的函数 steps

animation 本身是一个复合的属性,它包含了 animation-nameanimation-timing-functionanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode 六个属性。

steps 就是属于 animation-timing-function 中的一个函数。

animation-timing-function 平时我们用的比较多的是默认的一些动画曲线值 easeease-in 等等。而 steps 则可以由我们控制动画被分成多少个部分进行。

steps(n,[start|end]) 传入一到两个参数,第一个参数意思是把动画分成 n 等分,然后动画就会平均地运行。第二个参数 start 表示从动画的开头开始运行,相反,end 就表示从动画的结尾开始运行,默认值为 end。

因此,我们利用雪碧图和 steps 函数制作动画的原理就是,雪碧图包含了动画图片的每一帧,然后利用 steps 函数确定固定时间内动画运行的部分等于动画的帧数,从而实现动画效果。

动画实例

用猥琐的兔斯基做例子╮( ̄▽ ̄")╭

首先我们要切图,把动画的每一帧切成这样的图:

切图如果大家不想折腾,推荐在线合并雪碧图的工具

然后写 keyframes

@-webkit-keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}
@-moz-keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}
@keyframes tuski {
0% {
background-position:0;
}
100% {
background-position: -576px 0;
}
}

调用动画

#tuski {
-webkit-animation: tuski .5s steps(12) infinite;
-moz-animation: tuski .5s steps(12) infinite;
animation: tuski .5s steps(12) infinite;
}

与 GIF 相比,这种动画可以让我们手动调整动画运行的速度。

这里看完整的代码。

利用 CSS animation 和 CSS sprite 制作动画的更多相关文章

  1. 安卓Animation类与xml制作动画

    有时要对控件添加一点动画效果,在安卓中,动画效果也是一个类,也就是Animation类.把动画效果这个类弄好后,在与控件类关联到一起,就可以实现控件有一些动作特效这样的效果了.动画效果的定义,要在xm ...

  2. css animation & animation-fill-mode

    css animation & animation-fill-mode css animation effect https://developer.mozilla.org/en-US/doc ...

  3. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  4. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  5. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  6. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  7. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  8. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 论文笔记:目标追踪-CVPR2014-Adaptive Color Attributes for Real-time Visual Tracking

    基于自适应颜色属性的目标追踪 Adaptive Color Attributes for Real-Time Visual Tracking 基于自适应颜色属性的实时视觉追踪 3月讲的第一篇论文,个人 ...

  2. android自己定义之 5.0 风格progressBar

    近期做项目,用到了ProgressBar .就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ...

  3. Android抽屉菜单DrawerLayout的实现案例

    (1)项目布局文件 activity_main.xml <android.support.v4.widget.DrawerLayout xmlns:android="http://sc ...

  4. Boost Replaceable by C++11 language features or libraries

    Replaceable by C++11 language features or libraries Foreach → Range-based for Functional/Forward → P ...

  5. mac关闭和开启启动声

    1 关闭 sudo nvram SystemAudioVolume=%01 2 开启 sudo nvram -d SystemAudioVolume

  6. 0x0118消息就是WM_SYSTIMER

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/c0f9bac9-d211-4b8b-ba99-f5a0ed0d2e0a/what-is-w ...

  7. oc78--NSFileManager

    // main.m // NSFileManager #import <Foundation/Foundation.h> int main(int argc, const char * a ...

  8. oc68--NSString

    // // main.m // 字符串截取 #import <Foundation/Foundation.h> int main(int argc, const char * argv[] ...

  9. What is an ISAPI Extension?

    https://www.codeproject.com/Articles/1432/What-is-an-ISAPI-Extension Introduction Unless you have be ...

  10. bzoj 1935 Tree 园丁的烦恼

    题目大意: 一些点,每次查询一个矩形内有多少个点 思路: 因为空间太大 所以不能用什么二维树状数组 需要把这些点和所有查询的矩阵的左下和右上离线下来 先离散化 然后每个子矩阵像二维前缀和那样查询 按照 ...