关注前端 | 前端博客
当前位置: CSS3 > C3-animation

C3-animation

2018-07-08 分类:CSS3 作者:管理员 阅读(166)

animation复合属性

animation-name: 规定动画名称;
animation-duration: 动画执行完成所需时间,单位s;
animation-timing-function: 动画运动曲线,默认为ease;
animation-delay: 规定是否延迟执行,默认为0;
animation-iteration-count: 动画执行次数;
animation-direction: 动画是否逆向播放,默认normal;
animation-play-state: 动画执行状态;paused(暂停) | running(运行)
animation-fill-mode: 动画执行完成的状态;
@keyframes name{} 执行动画;
div{
    animation-name: name; /*规定动画名称*/
    animation-duration: 1s; /*动画执行完成所需时间,单位s*/
    animation-timing-function: ease; /*动画运动曲线,默认为ease*/
        animation-timing-function: linear; /*(匀速)*/
        animation-timing-function: ease; /*(慢速开始,然后加快,慢速结束)*/
        animation-timing-function: ease-in; /*(慢速开始)*/
        animation-timing-function: ease-out; /*(慢速结束)*/
        animation-timing-function: ease-in-out; /*(慢速开始,慢速结束)*/
        animation-timing-function: cubic-bezier(.17,.67,.91,.29); /*(cubic-bezier函数中自定义值)*/
    animation-delay: 0s; /*规定是否延迟执行,默认为0*/
    animation-iteration-count: 1; /*动画执行次数*/
        animation-iteration-count: 1; /*(一次)*/
        animation-iteration-count: infinite; /*(无限循环)*/
    animation-direction: normal; /*动画是否逆向播放,默认normal*/
        animation-direction: normal; /*(默认值不反向)*/
        animation-direction: alternate; /*(反向)*/
    animation-play-state: running; /*动画执行状态paused(暂停) | running(运行)*/
    animation-fill-mode: none; /*动画执行完成的状态*/
        animation-fill-mode: none; /*(无动作)*/
        animation-fill-mode: forwards; /*(停留在执行完成的最后一帧)*/
        animation-fill-mode: backwards; /*(返回起始位置)*/
        animation-fill-mode: both; /*(向前、向后填充模式都被应用)*/
}

第一种方式

@keyframes name{
  from{
    width: 10px;
  }
  to{
    width: 50px;
  }
}

第二种方式

@keyframes name{
  10%{
    width: 10px;
  }
  30%{
    width: 40px;
  }
  60%{
    width: 80px;
  }
  100%{
    width: 50px;
  }
}

animation各浏览器兼容:

demo

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 3 条评论 - C3-animation

  1. 轩陌 Mac OS X Chrome 67.0.3396.99

    😎 666

    1. 散人笔记 Windows NT 搜狗浏览器 2.X

      @轩陌初出茅庐,以后还望多多指教,感激不尽 🙂

  2. 苏晨 Linux Chrome 53.0.2785.134

    整合的很详细

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线