CSS3帧动画

Nino 发布于2019-08-30 15:53 / 1476人阅读

摘要：在制作帧动画的时候，一般采用雪碧图的方式，通过切换图片的位置，使其连续播放，从而形成动画。使用改造之后的代码，利用伪类进行背景填充，然后控制该元素移动来实现逐帧动画。

在制作帧动画的时候，一般采用雪碧图的方式，通过切换图片的位置，使其连续播放，从而形成动画。

雪碧图

雪碧图的制作可以使用compass制作，还可以使用一些小工具进行制作，提供一个在线制作雪碧图的网站。
CSS Sprites Generator

逐帧动画

我们可以使用css3的keyframes的方式进行逐帧动画

.sprite{
    height:78px;
    width:28px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{background-position: 0 0 }
    25%{ background-position:-28px 0;}
    75%{ background-position: -56px 0 }
    100%{ background-position:-84px 0;}
}

如果animation没有设置steps(1,start/end)，动画帧之间将采用默认的过渡方式，此时观察到的动画会变成滑动的方式，这不是我们想要的效果。
为此，我们需要使用steps函数。

steps

steps(number_of_steps, direction)

steps timing function接受两个参数，steps(n,start/end)，其中n为正整数，表示分为几步执行完，后一个参数是可选的，默认为end。

start表示的是一个左连续函数，在每个间隔的起点就发生阶跃变化，直到该间隔时间结束

end表示的是一个右连续函数，在每个间隔的终点才发生阶跃变化

关于steps()更多的资料可以查看 How to Use steps() in CSS Animations
对于人物走动的动画，由于是一个不断循环的过程，所以设置为start或者end都是可行的。

background-position与translate3d方式的比较

background-position会引起重绘，而translate3d不会。（对于会引起回流和重绘的属性可以查看这个网站 csstriggers，关于这个网站的介绍可以查看这个回答）
同时translate3d会开启GPU渲染加速，性能更好。
综上所述，translate3d方式较为优越。

使用translate3d改造之后的代码，利用after伪类进行背景填充，然后控制该元素移动来实现逐帧动画。

.sprite{
    overflow:hidden;//设置超出隐藏
    height:78px;
    width:28px;
}
.sprite:after{
    content:""; //加上content，内容才会显示
    display:block;
    width:112px ; 
    height:78px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{transform: translate3d(0,0,0)}
    25%{transform: translate3d(-28px,0,0)}
    75%{transform: translate3d(-56px,0,0)}
    100%{transform: translate3d(-84px,0,0)}
}

云服务器 GPU云服务器 css3动画高性能css3动画 css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116786.html

CSS3动画之逐帧动画

摘要：什么是逐帧动画要了解逐帧动画，首先要明确什么是逐帧动画。简而言之，实现逐帧动画需要两个条件相关联的不同图像，即动画帧连续播放。因此在触屏页面中逐帧动画使用广泛，下文将对其进行详细介绍。因此，逐帧动画也被称为精灵动画。什么是逐帧动画要了解 CSS3 逐帧动画，首先要明确什么是逐帧动画。看一下维基百科中的定义：定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，...

RancherLabs 2019-08-30 15:43 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0
入门css3动画

摘要：入门动画为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性动画分为两类过渡动画从一个状态变为另一个状态一个宽高都为，鼠标移上后变为宽高各这时候我们就可以用到过渡动画关键帧动画一个动画定义多个关键帧，实现更为复杂入门css3动画为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性 css3动画分为两类 1. 过渡动画trans...

BDEEFE 2019-08-30 15:43 评论0 收藏0