animation 和 transition 该怎么选

一时失言乱红尘 2021-09-18 02:28 355阅读 0赞

### **animation 和 transition 该怎么选** ###

作为 CSS 动画的两大核心，`animation` 和 `transition` 看似效果相同，实则有着各自的使用场景，懂得在正确的场景选择最合适的属性是至关重要的。下面我们就来全方位对比一下这两则之间的区别。

### 使用场景 ###

**transition**： 强调元素状态的过渡。这种过渡动画是很简单直接的，比如：用户将鼠标移到 `<a>` 标签的时候让其颜色从黑色变为红色

a {
      color: #000;
      transition: color 2s
    }
    a:hover {
      color: red
    }

**animation**： 强调元素的自由动画效果，一般用于复杂动画和页面加载时的动画，支持更灵活的控制，比如我们做了一个音乐播放器效果，可以无限旋转

.music {
     animation: rotate 3s linear infinite;
    }
    
    @keyframes rotate {
        from{
            transform: rotate(0deg)
        }
      to{
            transform: rotate(359deg)
        }
    }

### 使用复杂度 ###

**transition**：简单，只需要一行代码即可搞定

**animation**：需要单独定义 `keyframes` 才能使用 `animation`

### 何时触发 ###

**transition**： 用户通过某个操作事件来触发，如点击、获得焦点

**animation**：无需手动事件触发，在该元素被创建（不一定是在页面加载时）且 `animation` 样式应用到该元素上的时候开始执行（更准确说是在 `animation-delay`延迟之后执行）

### 多少帧 ###

**transition**： 只有从开始到结束两个帧节点

**animation**：可以通过 `keyframes` 定义多个关键帧，并且控制每个帧节点的状态

### 执行多少次 ###

**transition**： 只执行一次

**animation**：可通过 `animation-iteration-count` 精确指定要执行多少次动画，当然，如果其值为 `infinite` 则表示无限循环动画

### 相同点 ###

同时，这两者也是有一些相同点的：均支持动画缓动函数（timing function），均可定义动画开始执行前的等待时间和执行时长

原文链接 : [https://zao.awesomes.cn/\#/topic?id=4f9ac938-11b6-4000-8ffd-967880dfbd01][https_zao.awesomes.cn_topic_id_4f9ac938-11b6-4000-8ffd-967880dfbd01]

[https_zao.awesomes.cn_topic_id_4f9ac938-11b6-4000-8ffd-967880dfbd01]: https://zao.awesomes.cn/#/topic?id=4f9ac938-11b6-4000-8ffd-967880dfbd01