css3的动画特效

css3的动画特效--动画序列（animation）

2017/12/20 14:22:49 <a target="_blank" class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" style="margin:0px 8px 10px 0px; padding:0px; color:rgb(96,127,166); display:inline-block; vertical-align:middle; font-size:16px">saucxs</a>

首先复习一下animation动画添加各种参数

（1）infinite参数，表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数，用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下

.close:hover::before{
   -webkit-animation: spin 1s linear 1s 2;
   animation: spin 1s linear 1s 2;
}

（2）alternate参数。animation动画中加入反向播放参数alternate。在加入该参数后，动画将在偶数次数时反向播放动画。

.close:hover::before{
   -webkit-animation: spin 1s linear 1s 2 alternate;
   animation: spin 1s linear 1s 2 alternate;
}

animation属性参数中，延迟参数是我们较为常用的一种参数。当动画的对象为多个时，我们常常用延迟参数来形成动画序列。如以下代码定义了5个不同的图标：

Close
Close
Close
Close
Close

图标的基本样式和之前的Close图标一致，不同之处在于此处的图标都设置为inline-block，使它们能够横向排列。代码如下：

.close{
   font-size:0px;/*使span中的文字不显示*/
   cursor:pointer;/*使鼠标指针显示为手型*/
   display:inline-block;
   width:100px;
   height:100px;
   line-height:100px;
   border-radius:50%;/*使背景形状显示为圆形*/
   background:#FFF;
   color:#8b8ab3;
   text-align:center;
}
.close::before{
   font-family: 'suningcloud';
   speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
   font-size:48px;
   display:block;
}<br style="margin:0px; padding:0px">

初始化的时候展示，如下图所示；

接下来，为图标添加animation动画，使图标初始位置向下偏移-100%，然后再向上移动回到初始位置，在此过程中同时使图标由完全透明变化为完全不透明

.close{<br style="margin:0px; padding:0px"> font-size:0px;/使span中的文字不显示/<br style="margin:0px; padding:0px"> cursor:pointer;/使鼠标指针显示为手型/<br style="margin:0px; padding:0px"> display:inline-block;<br style="margin:0px; padding:0px"> width:100px;<br style="margin:0px; padding:0px"> height:100px;<br style="margin:0px; padding:0px"> line-height:100px;<br style="margin:0px; padding:0px"> border-radius:50%;/使背景形状显示为圆形/<br style="margin:0px; padding:0px"> background:#FFF;<br style="margin:0px; padding:0px"> color:#8b8ab3;<br style="margin:0px; padding:0px"> text-align:center;<br style="margin:0px; padding:0px"> /**/<br style="margin:0px; padding:0px"> -webkit-animation: moving 1s linear;<br style="margin:0px; padding:0px"> animation: moving 1s linear;<br style="margin:0px; padding:0px"> }

<br style="margin:0px; padding:0px">@-webkit-keyframes moving {
   from {
      opacity: 0;
      -webkit-transform: translateY(100%);
   }
   to {
      opacity: 1;
      -webkit-transform: translateY(0%);
   }
}
@keyframes moving {
   from {
      opacity: 0;
      transform: translateY(100%);
   }
   to {
      opacity: 1;
      transform: translateY(0%);
   }
}

以上5个图标的动画效果都是同时进行的，为了使图标运动带有先后顺序，我们将为每个动画添加延迟。和之前运用的方法所不同，我们可以直接通过animation-delay属性来设置animation动画延迟，代码如下：

.icon-suningliujinyun{<br style="margin:0px; padding:0px"> -webkit-animation-delay:0s;<br style="margin:0px; padding:0px"> animation-delay: 0s;<br style="margin:0px; padding:0px"> }<br style="margin:0px; padding:0px"> .icon-shousuo{<br style="margin:0px; padding:0px"> -webkit-animation-delay:.1s;<br style="margin:0px; padding:0px"> animation-delay: .1s;<br style="margin:0px; padding:0px"> }<br style="margin:0px; padding:0px"> .icon-zhankai{<br style="margin:0px; padding:0px"> -webkit-animation-delay:.2s;<br style="margin:0px; padding:0px"> animation-delay: .2s;<br style="margin:0px; padding:0px"> }<br style="margin:0px; padding:0px"> .icon-diaoyonglian{<br style="margin:0px; padding:0px"> -webkit-animation-delay:.3s;<br style="margin:0px; padding:0px"> animation-delay: .3s;<br style="margin:0px; padding:0px"> }<br style="margin:0px; padding:0px"> .icon-lingshouyun{<br style="margin:0px; padding:0px"> -webkit-animation-delay:.4s;<br style="margin:0px; padding:0px"> animation-delay: .4s;<br style="margin:0px; padding:0px"> }

在以上代码中，我们设置了5个图标的延迟时间分别为0、0.1、0.2、0.3和0.4s。实际上，延迟0秒为默认值，因此第一个图标实际上也不需要设置延迟代码。测试页面，动画效果如图所示。

里面我刷新了两次，发现最开头，几个图标将在顶部一闪而过。这个算bug

造成这个bug原因：在于除第一个图标外，其余图标都有一定的动画延迟，而在动画没有开始时，图标是没有发生偏移，也是完全不透明的，只有当动画开始的那一瞬间，图标才会切换到完全透明且偏移的动画起始状态。

解决办法：需要使用animation动画的animation-fill-mode属性。这一属性规定了元素在动画时间之外的状态是怎样的。若该值为forwards，则表示动画完成后保留最后一个关键帧中的属性值，该值为backwards时则恰好相反，表示在动画延迟之前就使得元素应用第一个关键帧中的属性值，而该值为both时则表示同时包含forwards和backwards两种设置。在本例中，我们使用backward或both均可，

.close{
   font-size:0px;/*使span中的文字不显示*/
   cursor:pointer;/*使鼠标指针显示为手型*/
   display:inline-block;
   width:100px;
   height:100px;
   line-height:100px;
   border-radius:50%;/*使背景形状显示为圆形*/
   background:#FFF;
   color:#8b8ab3;
   text-align:center;
   /**/
   -webkit-animation: moving 1s linear;
   animation: moving 1s linear;
   /*清除抖动*/
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both; 
}

效果如下图所示：

PS:在animation中也可以像transition动画那样设置速度曲线

比如实现：在本例中我们希望图标的运动带有一点弹性效果，即图标向上运动时，并非减速并停止在终点，而是到达终点后继续向上运动，超过一定距离后再反方向运动回到终点，形成一种往复的效果。

我们当然可以使用帧动画来实现这样的效果，但是如果使用速度曲线将更为简便。要使用自定义曲线，我们往往需要一些工具，因为CSS3动画使用了三次贝塞尔（Cubic Bezier）数学函数来生成速度曲线，而这个函数的参数并不直观。我们可以使用诸如<a target="_blank" class=" wrap external" href="http://link.zhihu.com/?target=http%3A//cubic-bezier.com" style="margin:0px; padding:0px; color:rgb(96,127,166); text-decoration:none" rel="noopener noreferrer">cubic-bezier.com</a>这样的站点来可视化地调整速度曲线。

接下来，我们就能够将该速度曲线写入animation属性的参数中，代码如下：

.close{
   font-size:0px;/*使span中的文字不显示*/
   cursor:pointer;/*使鼠标指针显示为手型*/
   display:inline-block;
   width:100px;
   height:100px;
   line-height:100px;
   border-radius:50%;/*使背景形状显示为圆形*/
   background:#FFF;
   color:#8b8ab3;
   text-align:center;
   /**/
   /*-webkit-animation: moving 1s linear;
   animation: moving 1s linear;*/
   /*cubic-bezier*/
    -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
     animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
   /*清除抖动*/
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both; 
}

效果如下图所示：

原文地址：https://blog.csdn.net/QT1E2/article/details/78859369?ops_request_misc=&request_id=4ac4022a84dd49759bfec91d9092784e&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-16-78859369-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88