10分钟入门CSS3 Animation


Posted in HTML / CSS onDecember 25, 2018

简介

Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果。

兼容性

animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要谨慎使用。

10分钟入门CSS3 Animation

CSS 坐标系

在了解animtion之前,我们有必要先了解css的坐标系,因为很多的animation效果都和元素的坐标密切相关。在css3中网页不再是一个二维平面,而是一个三维空间,水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x,y,z轴,如下图所示。箭头方向为正向,反之为负向(注意y轴方向与常规笛卡尔坐标系相反)。

10分钟入门CSS3 Animation

Animations

1. Transforms

transform中文译为“转换”,但我更倾向于称呼它“变形”(大名鼎鼎的变形金刚叫transformer)。我们可以使用transform function使html元素产生各种各样的变形,比如平移、缩放、旋转、扭曲等,而且不会影响正常的文档流(document flow)。

(1) Translate

Translate一般译为“翻译”,但在css里面一般用作“平移”,因为translate用于改变html元素的在3d坐标系位置。translate支持在坐标系内任意方向移动(通过任意组合x、y、z方向的向量),单位可以是长度单位和百分比(百分比是相对于被平移的元素自身尺寸,x轴是相对于width,y轴是相对于height,而在z轴方向由于元素是没有‘厚度’的,所以对于z方向不能用百分比表示),例如:

transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者简写
transform: translate3d(100px, 50%, 2em);

注意:

translate是xy平面内的2维平移,translate3d是xyz空间内的三维平移;

translate也可以单独书写,如 translate: 50% 105px 5rem;,但是该特性尚在实验阶段,很多浏览器不支持,所以现阶段还是配合transform使用。详情参考MDN translate。

(2) Scale

Scale意为“缩放”,顾名思义,是用于改变元素的大小。例如:

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者简写
transform: scale3d(2, 0.5, 1);

scale方法接收任意数字(正负整数、小数、0)作为参数,该参数为缩放系数,系数>1 效果为放大,0<系数<1 效果为缩小,系数=0 元素尺寸变为无限小而不可见,系数<0 效果为 >0 时的镜像(具体效果可自己实验)。

translate类似,scale也有2维 scale() 和三维 scale3d()之分,也可以单独书写,此处不赘述。

(3) Rotate

Rotate意为“旋转”,支持将元素以x、y、z为轴旋转,旋转正方向为面朝坐标轴正向逆时针方向,可参考上面坐标系示意图。rotate方法接收一个角度作为参数,角度>0 正向旋转,角度<0 负向旋转,例如:

// 默认绕z轴旋转
transform: rotate(90deg);
transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

与translate和scale不同,rotate不能简写为transform: rotate3d(30deg, 60deg, 90deg)的形式,rotate3d的用法为:前三个参数为数字,代表x、y、z方向的向量,相加得到向量v,第四个参数为角度,表示以向量v为轴逆时针旋转的角度,语法如下:

transform: rotate3d(1, 2, 3, 90deg);

translatescale类似,rotate也可以作为单独的css属性,但还在实验阶段。

出于篇幅考虑,我只列出三种最常用的tranform function,剩下的transform function请参考 MDN transform function。

(4) 组合

我们可以将不同的transform方法组合起来使用,如:

transform: translateY(200px) rotateZ(90deg) scale(3);

组合方法的执行顺序是从右往左,即先执行scale,然后rotate,最后translate,产生的效果是逐次累加的。方法书写的顺序对最后效果有很大的影响,看下面例子,沿y轴平移和放大,顺序不同,产生的结果有明显差别:

10分钟入门CSS3 Animation

如果先translate再scale,平移的距离也将被等比例缩放,而先scale再translate则不会。所以在使用transform需按照 translate -> rotate -> scale 的顺序书写,让scale先执行,以免放大translate的效果,而rotate先translate执行以防止带着平移的距离一起转动。我觉得这是transform目前不方便的地方,因为方法之间相互干扰并不容易理解,书写顺序也不容易记住。在未来有望通过使用独立的css transform属性解决这一问题,因为独立的transform属性对书写顺序没有依赖,方法之间彼此不会干扰。

Transition

Transition翻译为“过渡”,强调的是过程。在css中指在一段时间内,元素从一个状态(对应一个css属性)过渡到另一个状态的动态过程。我们可以决定以何种方式过渡过渡和花费多少时间。

例如,我们把鼠标悬浮到云上面的时候使其变大一些可以这么写:

.cloud{
    width: 240px;
    transition: 1s;
}
.cloud:hover{
    width: 320px;
}

效果:

10分钟入门CSS3 Animation

transition可以和transform结合使用,比如我们可以让云变大的同时转一圈:

.cloud:hover{
    width: 320px;
    transform: rotate(360deg);
}

效果:

10分钟入门CSS3 Animation

我们可以给不同的效果设置不同的过渡时间:

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s;
}

我们也可以给效果设置延时时间,比如我们等宽度增大之后再旋转:

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s 1s;
}

效果:

10分钟入门CSS3 Animation

我们还可以给每个效果设置不同的timing function,用于控制加速效果。

比如我们可以让旋转的速度逐渐加快:

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

效果:

10分钟入门CSS3 Animation

更多的timing function请后面会进一步讨论,也可以参考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文译为“关键帧”,是animation中很强大的功能,通俗说就是我们可以通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。

我们先看一个例子(部分代码省略)

html:

<div class="sky"></div>
<div class="grass"></div>
<div class="road">
  <div class="lines"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated">
</div>

css:

.mario{
  position: absolute;
  left: 0px;
  width: 100px;
}

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(0) }
  to{ transform: translateX(700px) }
}

效果:

10分钟入门CSS3 Animation

其中 drive 是该keyframes的名称,from, to 是keyframes播放过程的时间起点和终点,时间点也可以用百分比表示,如50%from, to 等价于 0%, 100%。每个时间点对应一个css状态,代表一个关键帧(keyframe)。keyframes定义完成后使用方法如下:

animation也有简写形式,如:

animation: slidein 3s ease-in 1s infinite reverse both running;

但这种对书写顺序有一定要求(delay要写在duration后面,其他参数无顺序要求,css会通过传入的关键词识别)。

(2) Animation Delay

通过animation-delay,我们可以给动画延迟执行:

animation-delay: 2s;

(3) Animation Fill Modeforwards

在上面的例子中可以看到马里奥运动到右边之后又回到了起点,如果我们想让他运动完成后就停留在右边呢?很简单,我们设置annimation fill mode就可以了:

animation-fill-mode: forwards

forwards 表示动画完成后,元素将保持最后一帧的状态。

backwards

与之相对的还有 backwardsbackwards表示并不是动画完成后元素变回第一帧的状态,而是表示当设置了animation-delay时,在动画开始前的等待过程中,立刻给元素应用第一帧的状态。我们将上面的例子稍作修改看一下效果:

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-fill-mode: backwords;
  animation-delay: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(350px) }
  to{ transform: translateX(700px) scale(2) }
}

效果:

10分钟入门CSS3 Animation

可以看到,动画开始之前小人立马移动到350px处,1s之后才开始动画。

both

显而易见,both会同时应用forwards和backwards两种规则,即在delay时先应用第一帧的状态,结束时保持最后一帧的状态。

(3) Animation Repeat

我们可以通过 animation-iteration-count 设置动画循环播放的次数,比如:

animation-iteration-count: 3;

// 无限循环
animation-iteration-count:infinite;

就像这样:

10分钟入门CSS3 Animation

(4) Animation Direction

normal

正常方向,也是默认方向,即先from,再to。

reverse

与正常方向相反,即先to,再from。例如:

.animated{
  ...
  
  animation-direction: reverse;
}

@keyframes drive {
  from{ transform: translateX(-100px) rotateY(180deg) }
  to{ transform: translateX(862px) rotateY(180deg)}
}

效果:

10分钟入门CSS3 Animation

alternate

alternate意为“交替”,即normal和reverse交替之行,先normal再reverse。

reverse alternate

反向交替,先reverse再normal。

(4) Animation Timing function

和transition一样,keyframes也可以设置timing function,常用的timing function归纳如下:

  • ease:默认方法,初速度较慢,然后加速再减速
  • ease-in:初速度最慢,然后一直加速
  • ease-out:初速度最快,然后一直减速
  • ease-in-out:初速度较慢,然后加速再减速,与ease的区别在于加速减速过程是对称的
  • linear:恒速运动

直观表现如下(codepen):

10分钟入门CSS3 Animation

除了上面现成的方法,我们可以通过贝塞尔曲线自定义速度曲线。我们可以在 http://cubic-bezier.com 可视化的创建我们自己的贝塞尔曲线。比如创建一个刚开始极慢,突然变得极快的曲线:

10分钟入门CSS3 Animation

css:

animation-timing-function: cubic-bezier(1,.03,1,-0.03);

效果:

10分钟入门CSS3 Animation

是不是挺神奇!

(5) Chain Animation

我们可以将多个animation串联使用,比如我们想让小人在行驶的过程中跳跃,可以这么写:

css:

.mario {
  ...
  
  animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;
}

@keyframes jump {
  0% { top: -40px; }
  50% { top: -120px; }
  100% { top: -40px; }
}

效果:

10分钟入门CSS3 Animation

实践

本文目的在于普及css3 animation的基础,并未完全覆盖animation的知识,未涉及和讲解的知识请大家见谅 。 掌握上述知识后,我们就已经可以用animation做出丰富的动画效果了,下面列出一些codepen上的小例子:

full mario demo

animated popup

fly items to shopping cart

flipping cards

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 #HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 #HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 #HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 #HTML / CSS
纯css3实现思维导图样式示例
Nov 01 #HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 #HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
You might like
php 启动报错如何解决
2014/01/17 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
React Router基础使用
2017/01/17 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现的彩票机选器实例
2015/06/17 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python 伯努利分布详解
2020/02/25 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
业务主管岗位职责范本
2013/12/25 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
内衣营销方案
2014/03/15 职场文书
英文推荐信格式范文
2014/05/09 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫