开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前言

前面一章我们讲解过CSS转换，比如我们将元素旋转90deg，但是这一过程我们是看不到的，那么如果我们想要将这个过程表现出来该怎么办呢？这个时候就要用到过渡或动画。这两个属性能将我们的页面从‘静态’变为‘动态’。

过渡

定义

transition用来表示过渡。它用来表示元素从一个状态切换为另一个状态的效果，比如说当我们鼠标滑过某个元素的时候，在滑动的时候做个过渡效果。

属性值

transition是简写属性，后面跟的是以下几个的属性的缩写：

transition-property：过渡的对象。后面跟属性名，比如width,height等。
transition-duration：过渡的时间。后面跟时间，比如3s，默认是0s。
transition-timing-function:过渡的效果。后面跟对应效果名称。

1.ease。默认值，表示从慢到快再到慢的过渡效果。

2.ease-out。以慢结束。

3.ease-in。以慢开始。

4.ease-in-out。以慢开始并且以慢结束。

5.linear。匀速过渡效果。

6.cubic-bezier。自定义，有四个值可以设置，都是0-1之间的值。这个函数是三阶贝塞尔曲线，两端平缓。
transition-delay：过渡的延时。后面跟时间ns，默认也是0s，从ns后才开始过渡。 transition就是上述四个的简写，我们按照上面的顺序去设置即可。

      ul li{
    float: left;
    list-style: none;
    background: orange;
    color: white;
    width: 50px;
    height: 20px;
    margin: 0 5px;
     /*全部属性过渡 过渡时间3s 匀速 延迟0s*/
    transition:1s linear 
   }
   ul li:hover{
     transform: scale(1.2);
     background: skyblue;
     color: antiquewhite;
   }

    <ul>
      <li>首页</li>
      <li>导航</li>
    </ul>

M5PZIY)(S3RPJ{2`I@4(PG4.png

当鼠标放上去就有过渡效果出来啦。

动画

定义

我们小时候都看过动画，它是可以自动的，CSS动画也是，当我们设置好动画属性，它就会自动展示相关效果。动画用animation去表示，这也是简写属性，在动画属性中最重要的就是动画名，动画名是需要@keyframes设置的。

@keyframes

@keyframes设置动画，里面包含动画的具体规则，@keyframes有兼容性。谷歌前要加-webkit-，火狐加-moz-,Opera加-o-。在@keyframes可以用from，to表示动画开始、结束。我们需要在里面设置具体的动画行为。

    @keyframes myanimation {
      from {
        width: 100px;
      }
      to {
        width: 300px;
      }
    }

上述就表示将元素宽度从100px变到200px。我们还可以进一步划分，用百分比表示某个状态达到的效果。

    @keyframes myanimation {
      0% {
        width: 100px;
      }
      25% {
        width: 150px;
      }
      50%{
        width: 200px;
      }
      75%{
        width: 250px;
      }
      100%{
        width: 300px;
      }
    }

属性

动画跟过渡的属性有些类似，基本也是过渡时间等，最主要的区别还是动画名称。

animation-name：@keyframes设置的名称。
animation-duration：动画完成一次的时间。
animation-timing-function：动画的效果。相比于过渡，动画多了一个setps，其他的如linear含义是一样。setps接受两个参数，第一表示间隔的数量，第二接受start(开始连续)，end(结束连续)。
animation-fill-mode：动画静止时的样式。比如延迟时的样式。
animation-delay：动画的延迟。
animation-iteration-count：动画播放次数。设置为infinite无限播放。
animation-play-state：控制动画的播放。paused暂停，running播放。
animation-direcion:控制动画播放顺序。normal从from到to，reverse从to到from

这么多属性，我们平时也就设置几个而已，其中动画名称肯定不能少的，时间设置下，效果一般也设置为linear，看起来更加顺滑。

   ul li{
      animation: myanimation 3s linear infinite;
    }

总结

对比过渡跟动画，过渡需要事件去触发，动画效果功能会更加全面一点，但不处理的会直接触发效果。两者适用于不同的场景，根据具体的需求选择合适的表示的方法，让页面‘动起来’。

CSS详解——过渡与动画

前言

过渡

定义

属性值

动画

定义

@keyframes

属性

总结