CSS3学习笔记-动画

使用关键帧声明动画@keframes，单位只能是百分比 ，如0%，格式如下：

@keyframes AnimaName{
    from{

    }
    percentage{

    }
    to{

    }
}

@keyframes AnimaName{
    0%{

    }
    percentage{

    }
    100%{

    }
}

或应用如下方式设置动画

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform: translateY(0);
    }
    40%{
        transform: translate(-30px);
    }
    60%{
        transform: translate(-15px);
    }
}

通过animation属性来调用动画

.test{
  animation: bounce .2s ease-in;
}

属性详解

animation-name  动画名@keyframes后面的自定义名字，可以用none来覆盖任何动画

animation-duration 动画播放时间

animation-tining-function 动画播放方式

animation-delay 动画延迟播放的时间

animation-iteration-count 动画播放的次数

animation-direction 动画播放的方向 alternate 偶数次向前播放，奇数次反向播放 默认值normal向前播放

animation-play-state 动画播放状态 pause | running

animation-fill-mode 动画时间外属性

    none  完成最后一帧时回到初始帧处

    forwards 动画应用结束后继续应用最后关键帧的位置

    backwards 向元素应用动画样式时迅速应用动画的初始帧

    both 同时具有以上两个效果