CSS 动画学习笔记——Animation篇

首先了解一下 Animation 的基本用法，使用其需要给动画指定一个周期持续的时间，以及动画效果的名称。可以看一下demo

 

注释：这是一个给透明和背景色属性设置的一个动画过渡效果

实现很简单（具体看到代码中的注释）：

 1         .block_wrap {
 2             width: 500px;
 3             height: 500px;
 4             background: #e3e3e3;
 5             /*第一个参数为这个动画的持续时间，第二个参数是动画效果的标题，可以理解为定义一个class，不过这是专属于动画的class*/
 6             animation: 4s opacity;
 7             margin: 0 auto;
 8         }
 9         /*动画效果，opacity为效果标题，@keyframes必须要写*/
10         @keyframes opacity {
11             0% {opacity: 0; background: }
12             25% {opacity: 0.25}
13             50% {opacity: 0.5}
14             100% {opacity: 1; background: red}
15         }

除了代码中的注释，另外还需要说一下，opacity 中，从 0%—100%，这是我们给动画指定的一个持续周期，指定了到哪个程度，动画就按照里面的属性进行展示，这个周期是必须的！ 

上面是一个很简单的动画，刷新一次页面即展示一次，如果想要重复地展示动画效果呢？简单，只需要添加一个 infinite 关键字 ，可以指定循环次数，将 infinite 关键字换成数字即可。

1             /*添加infinite关键字，使其可重复*/
2             animation: 4s opacity i