CSS3 transition animation了解一下？

骤雨
1,711 阅读4分钟

transition和animation都是css3提出的新特性，我们可以使用这两个特性做出丰富的动画效果。但由于这两个特性的功能又有部分重叠，很多时候不知道该选择哪一种。接下来让我们了解一下这两个特性以及他们的使用方法吧。

Transition

transition的字面意思即为过渡，它通过控制元素属性将元素的样式从一个状态过渡到另一个状态。下表列出了transition的基本属性：

transition

下列四个过度属性的简写方式

transition-property

应用css过渡的css属性

transition-duration

过渡效果的持续时间

transition-timing-function

规定了过渡效果的时间曲线，即过渡的匀变速

transition-delay

规则过渡效果何时开始，默认是0

接下来让我们通过一些例子来了解一下上述属性的使用方法吧。

我们先来看一个最基本的例子，效果如下图，当鼠标移入元素时，元素翻转360度并且进行颜色大小的变换。当鼠标移出时，元素样式自动变回原样。

 <style>
    .transition {
      ...
      background-color: red;
      transition: transform 2s, background-color 2s;
    }
    .transition:hover {
      transform: scale(1.2) rotate(360deg);
      background-color: yellow;
    }
</style>
<div class="transition">transition</div>

上面列出了一些关键代码。我们定义一个类名为transition的div元素，在他的类名下面定义一些基础属性表示起始状态，同时使用:hover伪类定义结束状态。上面代码最关键的一行便是transition属性，在transition属性里面控制了transform与background-color两个css属性，并且持续时间为两秒。

难道transition只能制作简单的效果吗？它的能力就仅限于此吗？当然不是，我们也可以使用transition制作连续的动画效果，这时可以借助javascript的帮助。先来看一下下面这个简单跑马灯的例子。

function startCarousel() {
    setTimeout(function () {
         left = left - width;
         carousel.setAttribute('style', `
              transition: left 0.6s;
              left: ${left}px;
         `)
     }, 1000);
}
carousel.addEventListener('transitionend', startCarousel);
carousel.addEventListener("webkitTransitionEnd", startCarousel);
startCarousel();

这是一个走马灯的简单实现，使用settimeout方法定时来改变元素的left属性来实现走马灯的移动。下面使用了transitionend事件，将改变left属性的函数绑定到此属性上，当transition结束时便调用此方法。js同时也提供了transitionstart事件，在transition开始时触发事件。

Animation

transition指定了开始和结束状态，animation就类似于逐帧动画，就像视频播放一样细腻灵活。这种逐帧动画有关键帧组成，多个关键帧的连续播放就构成了动画。css3的animation就是利用这一原理，使用keyframe属性完成动画的逐帧播放。

animation-name

用来设置动画名称

animation-duration

动画的持续时间

animation-timing-function

动画播放时间曲线，类似于transition-timing-function

animation-delay

设置动画的延迟时间

animation-iteration-count

动画循环次数，默认是1，可以设置为infinite无限循环

animation-direction

动画播放方向

animation-play-state

动画播放状态：running(播放中)，paused(暂停)

animation

上述属性的简写

下面通过一个小例子来了解一下常用动画属性的基本用法。

<head>
    <style>
        .div {
            ...
.            
            animation-name: move, size;
            animation-duration: 3s;
            animation-timing-function: ease-in-out;
            animation-play-state: paused;
            animation-iteration-count: infinite;
            animation-direction: alternate
        }
        @keyframes move {
            0% {
                left: 0;
                transform: rotate(0deg);
            }
            100% {
                left: 500px;
                transform: rotate(720deg);
            }
        }
        @keyframes size {
            from { font-size: 25px; }
            to { font-size: 50px; }
        }
    </style>
</head>




<body>
    <div class="div">
        😊
    </div>
    <div>
        <button id="run">run</button>
        <button id="pause">pause</button>
    </div>
    <script>
        var ele = document.getElementsByClassName('div')[0];
        document.getElementById('run').addEventListener('click', function() {
            ele.style.animationPlayState = 'running'
        });
        document.getElementById('pause').addEventListener('click', function() {
            ele.style.animationPlayState = 'paused'
        });
    </script>
</body

上面的例子中定义了两个关键帧move和size，分别控制笑脸的移动和大小。这里使用@keyframe关键帧属性，keyframe内部可以使用from to 或者百分比来定义动画帧。css中定义了animation-play-state为pause代表动画处于暂停状态，animation-direction的alternate属性表示动画反复播放。在js代码中我们定义了两个按钮来改变元素的animation-play-state属性来控制动画的播放和暂停。

从上面的例子可以了解到，transition的起始和结束状态可以理解为animation的from to。当我们仅仅是为了实现简单的过渡效果时，transition无疑是更佳的选择，否则需要大量js代码来协助完成。而由于animation多关键帧的灵活性，仅仅使用css便可完成复杂的动画效果。我们可以根据不同的业务场景来选择合适的动画方案。


avatar
文章
阅读
粉丝