文章目录

目的
动画介绍
- CSS动画
- JavaScript动画
- Canvas动画
- SVG动画
CSS动画
- CSS Transition
- CSS Animation
- timing-function
CSS Transform
总结

目的

前端页面中加入适当的动画效果可以极大地提升用户的体验。前端中加入动画的方式很多，这篇文章将稍微做个介绍，然后重点说下CSS动画。

动画介绍

CSS动画

CSS动画主要有两类，最简单的就是CSS Transition：

稍微复杂一点的动画可以用CSS Animation：

JavaScript动画

JavaScript动画简单来说就是用代码定时手动改变页面状态，最直接的就是用setInterval或setTimeout：

上面的方式性能上可能不太友好，有些时候还可能会出点小问题，H5中新加入了 requestAnimationFrame ，这个是专门用于帧动画的：

requestAnimationFrame 方法接收一个函数，该函数会在显示器下一次刷新时运行（1帧），所以如果需要动画持续运行的话需要每一帧反复设置 requestAnimationFrame ；
通常情况下显示器每秒刷新60帧，每一帧间隔时间约为16.667毫秒；
requestAnimationFrame 每次调用函数时会向函数传输一个时间戳；
可以使用 cancelAnimationFrame 方法取消已设置的 requestAnimationFrame ；

Canvas动画

Canvas是H5新加入的标签，提供了一些绘图相关的API，可以在它内部绘制2D或3D图像。Canvas本身内容比较多，可以自行百度了解，以后有时间也会另外专门介绍。

SVG动画

SVG动画主要是在页面中嵌入SVG标签元素，利用SVG本身的动画功能。SVG本身内容比较多可以自行百度了解，以后有时间也会另外专门介绍。

CSS动画

CSS Transition

Transition主要用于元素属性变化时提供时间上的过渡效果。Transition总共有四条属性：

属性	说明
transition-property	过渡效果应用的属性，比如元素的width或height，默认为all 即如果不指定则会将效果施加到所有支持的属性上
transition-duration	过渡效果持续时间，必须设置此项，默认为0s
transition-timing-function	过渡效果变化速度，默认为ease，慢快慢
transition-delay	过渡效果延迟多少时间后开始执行，默认为0s

这四个属性可以复合使用：
transition: <property> || <duration> || <timing-function> || <delay>
下面是一些简单的演示：

Transition使用本身比较简单，更多演示可以参考下面链接：
https://projects.verou.me/animatable/

CSS Animation

Animation相比Transition可以实现更加复杂的动画效果，而且不需要触发即可播放。更强的功能带来了更多的属性：

属性	说明
animation-name	关键帧（@keyframes）名称
animation-duration	动画持续时间，必须设置此项，默认为0s
animation-timing-function	动画播放速度，默认为ease，慢快慢
animation-delay	动画延迟多少时间后开始执行，默认为0s
animation-iteration-count	动画循环播放次数，默认为1，取infinite可以无限循环播放
animation-direction	动画播放方向，可选值如下： normal 默认值，每个动画循环结束重置到起点重新开始； alternate 动画正反向交替播放； reverse 反向播放动画，每周期结束动画由尾到头播放； alternate-reverse 第一次反向播放，然后正反向交替播放；
animation-fill-mode	动画不播放时（播放完成时或有延迟未开始播放时）的状态，可选值如下： none 动画未播放时不应用任何动画样式； forwards 动画播放完成后元素保持最后一帧状态； backwards 动画未播放时元素应用动画第一帧状态； both 同时应用forwards和backwards；
animation-play-state	控制动画播放和暂停，可选值如下： running 运行；暂停 paused；

和Transition一样Animation的这些属性也可以复合使用。

Animation需要用到@keyframes，这个用来描写关键帧信息，语法如下：
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector表示动画播放过程的时刻，可以用0%、50%、100%等表示，也可以用from表示0%、用to表示100%。

下面是一些简单的演示：

timing-function

Transition和Animation里都有 timing-function 这个属性。这个属性控制的是动画的播放速度，自带的可选值有以下几个：

取值	说明
linear	以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease	慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值
steps(n,start/end)	将每一段关键帧分成n段，每次播放这一段中前面或后面一格画面 start 显示尾部画面、end 显示头部画面
step-start	等于steps(1,start)
step-end	等于steps(1,end)

上面的cubic-bezier（贝塞尔曲线）可以通过网站生成数据：https://cubic-bezier.com/
利用cubic-bezier可以制作出很有意思的的效果：

cubic-bezier相关的取值都是平滑的，而带step字段的取值的都是帧动画，这个也可以做比较有意思的事情：

帧动画根据我上面的文字描述和演示如果能理解的话很快就可以理解，不能理解的话可以参考下面链接：
https://www.cnblogs.com/aaronjs/p/4642015.html
利用帧动画可以做打字机效果：

CSS Transform

Transform可以实现对元素的位移、缩放、旋转、扭曲等功能（有点类似于PS中的自由变换，但比自由变换要强大很多）。利用Transform可以实现很多丰富的视觉效果，CSS动画很多时候都需要结合Transform使用才能得到优异的效果。Transform主要可设置效果如下：

属性	说明
none	不进行转换
matrix(n,n,n,n,n,n)	2D变换
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D变换
translate(x,y)	2D平移
translate3d(x,y,z)	3D平移
translateX(x)	沿X轴平移
translateY(y)	沿Y轴平移
translateZ(z)	沿Z轴平移
scale(x[,y]?)	2D缩放
scale3d(x,y,z)	3D缩放
scaleX(x)	沿X轴缩放
scaleY(y)	沿Y轴缩放
scaleZ(z)	沿Z轴缩放
rotate(angle)	2D旋转
rotate3d(x,y,z,angle)	3D旋转
rotateX(angle)	沿X轴旋转
rotateY(angle)	沿Y轴旋转
rotateZ(angle)	沿Z轴旋转
skew(x-angle,y-angle)	沿X/Y轴倾斜转换
skewX(angle)	沿X轴倾斜转换
skewY(angle)	沿Y轴倾斜转换
perspective(n)	为3D转换元素定义透视视图

下面是一个简单的演示：

上面的很多属性在生效的时候都是基于元素中心点的，可以通过 transform-origin 属性来改变变换时元素的中心点：

应用了Transform的元素不会脱离文档流，也不会改变它在文档流的大小和位置：

Transform本身的内有比较多，更多内容可以参考下面链接：
《CSS3 transform介绍》 https://www.jianshu.com/p/17e289fcf467

总结

在前端页面中加入适当的动画效果可以极大地提升用户的体验，在这其中CSS动画既简单又强大，使用场景非常广泛。这篇文章将的都是些基础的使用，只看上面内容没有点设计基础的话是比较难设计出好看的效果来的，进一步提升的话可以参考下面文章：
《我写CSS的常用套路》 https://juejin.cn/post/6844904033405108232
《我写CSS的常用套路·续》 https://juejin.cn/post/6881546676188741645

最后放上一个酷炫的七喜官网供大家欣赏：https://7up.nl/7up

前端笔记：动画介绍与CSS动画说明相关推荐

[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
[前端笔记——HTML介绍] 2.开始学习HTML
[前端笔记--HTML介绍] 2.开始学习HTML 1什么是HTML? 2剖析一个HTML元素 3块级元素和内联元素 4空元素 5属性 6为一个元素添加属性 7布尔属性 8省略包围属性值的引号 9单引 ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
倒计时动画 html,HTML+CSS动画实现倒计时
最近想做一个倒计时的动画,来实现圆形时间动画倒计时特效做之前自己的想法是,对像素点的位置用函数进行判断,然后将对应位置的颜色隐藏,但是这样很麻烦,而且自己不知道怎么用函数去实现圆环均匀消失这样的效果 ...
css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...

前端笔记：动画介绍与CSS动画说明

文章目录

目的

动画介绍

CSS动画

JavaScript动画

Canvas动画

SVG动画

CSS动画

CSS Transition

CSS Animation

timing-function

CSS Transform

总结

前端笔记：动画介绍与CSS动画说明相关推荐

最新文章

热门文章