首页 > Web开发 > 详细

CSS3学习笔记-动画

时间:2018-09-22 23:42:20      阅读:297      评论:0      收藏:0      [点我收藏+]

使用关键帧声明动画

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

CSS3学习笔记-动画

原文:https://www.cnblogs.com/goOtter/p/9691589.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!