animation和transition该怎么选

发布时间:2019-01-03 作者:一点通


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

使用场景

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

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

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

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

使用复杂度

transition:简单,只需要一行代码即可搞定

animation:需要单独定义keyframes才能使用animation

何时触发

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

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

多少帧

transiton:只有从开始到结束两个帧节点

animation:可以通过keyframes定义多个关键帧,并且控制每个帧节点的状态

执行多少次

transition:只执行一次

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

相同点

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