持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

动画

动画的定义

CSS3新增 animation 属性使得仅通过 CSS 的样式属性实现动画效果成为可能。

实现动画包括以下两个部分:

用于定义动画的样式规则
用于设置动画开始、结束以及中间点样式的关键帧

相对于传统使用JavaScript时间的动画方式，CSS3新增的animation属性具有以下三个优点：

能够非常容易的创建简单动画，甚至不需要掌握 JavaScript。
动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于 JavaScript实现的动画效果。
允许浏览器优化动画的性能和效果，让浏览器控制动画序列。

animation 属性

CSS animation属性是一个简写属性，用于创建复杂的动画序列，并控制CSS的样式属性实现动画效果。

该属性可以分为以下几个样式属性:

animation-name: 用于设置关键帧动画的名称，该属性值必须与@keyframes规则相对应。
animation- duration:用于设置动画执行所需的时长。
animation-timing-function: 用于设置动画的执行方式，与transition-timing- function属性类似。
animation- delay:用于设置开始执行动画之前需要等待的时长。
animation-iteration- count:用于设置动画执行的循环次数。
animation- direction:用于设置动画执行的方向。
animation-play- state: 用于设置动画执行的状态。
animation- fill-mode: 用于设置动画的时间外属性。

@keyframes声明动画

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

语法结构如下：

 @keyframes<keyframes-name>{
         <keyframs-block-list>
 }

keyframes-name:用于设置当前动画的名称，以便通过animation-name属性调用。
keyframe-block-list: 用于设置动画执行过程中的关键帧。

注意：

通过使用@keyframes建立建立动画序列后，需要通过animation属性或者animation-name属性调用。

通过名称调用动画

animation- name属性用于应用指定的一系列动画，每个动画名称都是由@keyframes规则定义的。

一个效果可以调用多个动画

比如：

 animation-name:none;
 animation-name:one;
 animation-name:two;

设置动画执行时间

animation-duration属性用于设置动画执行的时长。默认值为0秒，表示无动画效果。

比如：

 animation-duration: 2s;

设置动画执行方式

animation-timing-function属性用于设置动画执行的方式。

设置动画执行次数

animation- iteration-count属性用于设置动画执行的次数。默认值为1,表示动画只执行一次

 animation-iteration-count: infinite;
 animation-iteration-count: 3;
 animation-iteration-count: 2.3;

设置动画执行方向

animation-direction属性用于设置动画是否反向执行。

 animation-direction: normal;
 animation-direction: reverse;
 animation-direction: alternate; 
 animation-direction: alternate-reverse;

设置动画执行状态

animation- play -state属性用于设置动画是运行还是暂停。通过该样式属性可以确定动画是否正在执行。

语法结构如下：

 animation-play-state: running;
 animation-play-state: paused;

设置动画时间外属性

animation-fll-mode属性用于设置动画执行之前和执行之后如何为动画的目标元素应用样式。

 animation-fill-mode: none;
 animation-fill-mode: forwards;
 animation-fill-mode: backwards;
 animation-fill-mode: both;

实现简单的动画效果

如下代码所示：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>简单动画效果</title>
     <style>
         /* 
             通过CSS的样式规则定义动画
             @keyframes action {
                 执行动画过程中的关键帧
             }
 
          */
         @keyframes action {
             from{
                 width: 200px;
 
             }
             to{
                 width: 500px;
                 background-color: darkturquoise;
             }
         }
         /* 
             在对应的样式块中，通过animation属性进行调用
             * animation-name —— 表示设置当前使用的动画名称
             * animation-duration —— 表示设置当前动画执行的时长
             * animation-delay —— 表示开始执行动画之前等待的时间
             * animation-iteration-count —— 表示设置当前动画执行的次数
          */
         .box{
             width: 200px;
             height: 200px;
             background-color: darkorchid;
             animation-name: action;
             animation-duration: 2s;
             animation-delay: 1s;
             animation-iteration-count: infinite; /* 执行次数为无数次 */
         }
     </style>
 
 </head>
 <body>
     <div class="box"></div>
 </body>
 </html>

效果图：动图一.gif

动画子属性效果

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>动画子属性效果</title>
     <style>
         /* 
             通过CSS的样式规则定义动画
             @keyframes action {
                 执行动画过程中的关键帧
             }
 
          */
         @keyframes action {
             from{
                 width: 200px;
 
             }
             to{
                 width: 500px;
                 background-color: darkturquoise;
             }
         }
         /* 
             在对应的样式块中，通过animation属性进行调用
             * animation-name —— 表示设置当前使用的动画名称
             * animation-duration —— 表示设置当前动画执行的时长
             * animation-delay —— 表示开始执行动画之前等待的时间
             * animation-iteration-count —— 表示设置当前动画执行的次数
          */
         .box{
             width: 200px;
             height: 200px;
             background-color: darkorchid;
             animation-name: action;
             animation-duration: 2s;
             animation-delay: 1s;
             animation-iteration-count: 2; 
        /*      animation-direction: reverse; 设置为反向执行 */
             animation-fill-mode:forwards;
         }
     </style>
 
 </head>
 <body>
     <div class="box"></div>
 </body>
 </html>

效果图：

弹性盒子模型概念

CSS3新增了弹性盒子模型( Flexible Box或ElexBox)，是-种新的用于在HTML页面实现布局的方式。使得当

HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。

弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。

弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响HTML页面性能。

弹性盒子模型相关概念

伸缩容器( flex container) :包裹伸缩项目的父元素。
伸缩项目( flex item) :伸缩容器的每个子元素。
轴(axis) :每个弹性盒子模型拥有两个轴。

主轴(main axis) :伸缩项目沿其-次排列的轴被称为主轴。

侧轴(cross axis) :垂直于主轴的轴被称为侧轴。
方向(direction) :伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
尺寸( dimension) :根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。

对应主轴的称为主轴尺寸。

对应侧轴的称为侧轴尺寸。

定义弹性盒子模型

CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline- flex即可。

 display : flex;
 display : inline-flex;

按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器,其子元素则成为伸缩项目。

flex: 设置指定元素为块级元素的弹性盒子模型。
inline-flex: 设置指定元素为行内块级元素的弹性盒子模型。

弹性盒子模型依旧存在浏览器兼容问题:

 display : -webkit-flex;
 display: -ms-flex;
 display: -moz-flex;
 display: -o-flex;

如下代码展示了如何定义弹性盒子模型：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>定义弹性盒子模型</title>
     <style>
         /* 
             为父级容器元素设置display为flex值
             * 表示当前元素及其所有子元素就是弹性盒子模型
             * 默认情况下，所有子元素作为伸缩项目（沿着主轴进行排列）
          */
         .container{
             display : inline-flex;
         }
         .container div{
             width: 300px;
             height: 200px;
             
         }
         .container div:nth-child(1){
             background-color: darkviolet;
         }
         .container div:nth-child(2){
             background-color: green;
         }
         .container div:nth-child(3){
             background-color: blue;
         }
     </style>
 </head>
 <body>
     <!-- 实现弹性盒子模型的HTML结构  -> 父级与子级的结构 -->
     <div class="container">
         <div></div>
         <div></div>
         <div></div>
     </div>
 </body>
 </html>

效果图如下：

CSS 动画

动画