保持动画结束后样式

在H5开发中，我们经常遇到这样的情况，希望元素在动画完成后，能够保持最后一帧的样式，此时需要用到css的animation-fill-mode属性

可用值有以下4种情况

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

如下，logo默认样式为透明度50%，但是由于设置了animation-fill-mode为both，将保持动画的初始和结束样式

<style>
    .logo{
        width: 200px;
        height: 200px;
        background-color: red;
        animation: fade-in-left 2s 2s;
        animation-fill-mode: both;
        opacity: 0.5;

    }


    @keyframes fade-in-left {
        0%{
            opacity: 0;
            transform: translateX(-100%);
        }
        100%{
            opacity: 1;
            transform: translateX(0%);
        }
    }

   
</style>
<div class="logo">

</div>

多个动画执行

有时候希望给一个元素添加多个动画，可以通过css的animate属性来设置，多个动画逗号隔开

nimation: name duration timing-function delay iteration-count direction,name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

如下，logo将先从左侧渐渐出现，然后无效执行旋转动画

<style>
    .logo{
        width: 200px;
        height: 200px;
        background-color: red;
        animation: fade-in-left 2s 2s,rotate 1s linear 5s  infinite;
        animation-fill-mode: both;
        opacity: 0.5;

    }


    @keyframes fade-in-left {
        0%{
            opacity: 0;
            transform: translateX(-100%);
        }
        100%{
            opacity: 1;
            transform: translateX(0%);
        }
    }

    @keyframes rotate {
        0%{
            transform: rotate(0deg);
        }

        100%{
            transform: rotate(360deg);
        }
    }
</style>
<div class="logo">

</div>

分享到