• 技术文章 >web前端 >前端问答

    css3动画有哪些属性

    青灯夜游青灯夜游2021-04-08 18:18:39原创132

    css3动画属性有:“@keyframes”、animation、animation-name、animation-duration、animation-delay、animation-direction等等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3动画属性:

    示例:使用css3动画属性制作简单动画

    body {
      background-color: #fff;
      color: #555;
      font-size: 1.1em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .container {
      margin: 50px auto;
      min-width: 320px;
      max-width: 500px;
    }
    
    .element {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      background-color: #0099cc;
      border-radius: 50%;
      position: relative;
      top: 0;
      -webkit-animation: bounce 2s infinite;
      animation: bounce 2s infinite;
    }
    
    @-webkit-keyframes bounce {
      from {
        top: 100px;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      25% {
        top: 50px;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      50% {
        top: 150px;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      75% {
        top: 75px;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      to {
        top: 100px;
      }
    }
    
    @keyframes bounce {
      from {
        top: 100px;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      25% {
        top: 50px;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      50% {
        top: 150px;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
      }
      75% {
        top: 75px;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      to {
        top: 100px;
      }
    }

    3、运行效果

    1.gif

    (学习视频分享:css视频教程

    以上就是css3动画有哪些属性的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css3动画
    上一篇:css层叠是什么 下一篇:css定位方式有哪几种
    第15期线上培训班

    相关文章推荐

    • CSS3实现文字折纸效果的方法(代码示例)• 浅谈CSS3 Grid网格布局(display: grid)的用法• 使用CSS3实现简单时间轴效果(附代码)• CSS3如何实现流星雨效果?(代码示例)• 用css3实现一个奥运五环

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网