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 同时具有以上两个效果

转载于:https://www.cnblogs.com/goOtter/p/9691589.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值