CSS3 动画技术基础教程

时间：11-13 神话故事提交错误

大家好，如果您还对CSS3 动画技术基础教程不太了解，没有关系，今天就由本站为大家分享CSS3 动画技术基础教程的知识，包括的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

Animation

前言

一个好的前端工程师会更加注重用户体验和交互。那么动画是将我们的静态页面变成灵活的页面并为我们的界面添加个性的一种方式。

下面是七夕的官方主页，这是丰富互动的一个很好的例子。当鼠标移至导航栏时，会播放多种动画效果，给用户带来炫酷的体验。我认为前端工程师更注重用户体验，而不是一味追求Javascript编码技巧。

这里写图片描述七夕官网

个人网站

Github源码（欢迎Fork~~）

Animation 组成

CSS3动画由三部分组成。

1.关键帧(@keyframes)

Keyframes（关键帧）——定义动画在不同阶段的状态。动画属性（property）——决定动画的播放时长、播放次数、使用什么函数来播放动画等。（可以类比为音视频播放器）css属性——是动画的状态不同关键帧下的css元素。让我们看下面的一个例子。

创建了一个名为下拉菜单的@keyframes。

关键帧主要分为3个阶段，0%、50%、100%。动画播放时长6s，循环播放（infinite），以linear模式播放。修改后的元素属性为margin-top.list div:first-child {

animation: 下拉8s线性无限；

}

@关键帧下拉列表{

0% { 边距-top: 0px;}

/** 暂停效果*/

10% { 边距-top: 0px;}

50% { 边距-top: -100px;}

60% { 边距-top: -100px;}

90% { 边距-top: -200px;}

100% { 边距-top: -200px;}

}这里写下图片描述即可查看源码

MDN 参考网站

需要注意！当属性的个数不确定时：

当我们定义不同的关键帧时，元素属性的数量是一个变化的值。

如果某个关键帧的属性没有出现在其他关键帧中，那么这些属性将使用前一帧的默认值。

不同的是渐变效果后面默认不会出现。例如下面两种写法：

@关键帧下拉列表{

0% { top: 0; }

30% { top: 300px; }

50% { top: 150px; }

70% { top: 300px; }

80% { top: 0px;左：-200px;}

100% { top: 0px; }

}在此处写图像描述@keyframes dropdown {

0% { top: 0;左：0px；}

30% { top: 300px;左：0px；}

50% { top: 150px;左：0px；}

70% { top: 300px;左：0px；}

80% { top: 0px;左：-200px;}

100% { top: 0px;左：0px；}

}在此写入图片描述

语法

@keyframeskeyframes-name {

[ [from|to|百分比] [，来自|到|百分比]* 块]*

}

keyframes-name帧列表的名称。该名称必须符合CSS 语法中标识符的定义。

from相当于0%。

to相当于100%。

2.动画属性

动画属性可以理解为播放器的相关功能。一个最基本的播放器应该具备：播放/暂停、播放时长、播放顺序（倒退/前进/交替播放）、循环次数等。

主要分为两大点：

指定播放的元素定义了播放信息的配置。

这里写图片描述动画源码

简写属性形式：

动画：

[animation-name] [animation-duration] //动画名称和持续时间

[animation-timing-function][animation-delay] //关于时间的函数(properties/t)，延迟时间

[animation-iteration-count] [animation-direction] //播放次数、播放顺序

[动画填充模式] [动画播放状态]； //设置播放前或停止后相应的样式，控制动画运行或暂停

MDN 参考文档

1.时间函数（animation-timing-function）

animation-timing-function 属性定义动画的播放速度曲线。

可选配置参数为：

舒适，

轻松进入，

缓出，

缓入缓出，

线性，

三次贝塞尔曲线（数字，数字，数字，数字）

这里写图片描述动画源码

默认值，如果没有显式调用函数，则默认为Easy。

2.动画方向（animation-direction）

animation-direction 属性指示CSS 动画是否反向播放。

可选配置参数为：

单动画方向=正常|反向|替代|交替-反向

animation-direction: 正常播放animation-direction: 反向播放animation-direction: 交替播放animation-direction: replacement-reverse 播放animation-direction: 正常、反向animation-direction: 交替、反向、正常在这里写图片描述动画源代码

MDN 文档

3.动画延迟（animation-delay）

animation-delay属性定义动画何时开始播放，即从动画应用于元素到动画开始的时间长度。

默认值为0s，这意味着动画在元素上后立即开始。

该值以秒(s) 或毫秒(ms) 为单位。

4.动画迭代次数（animation-iteration-count）

animation-iteration-count 这个属性定义了我们的动画播放的次数。次数可以是1次，也可以是无限循环。

默认值仅播放一次。

单次动画迭代计数=infinite|数字

5.动画填充模式（animation-fill-mode）

动画填充模式是指在给定动画播放之前和之后应用于元素的样式。

单动画填充模式=**无**| **转发**| **向后**|bothanimation-fill-mode: none 动画执行前后不改变任何样式animation-fill-mode:向前保持目标动画最后一帧的风格animation-fill-mode:向后保持第一帧的风格目标动画的animation-fill-mode: 两个动画都会执行向前和向后执行的动作。