zoukankan      html  css  js  c++  java
  • 设置动画播放时间

    animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒

    语法规则

    animation-duration: <time>[,<time>]*

    取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)。

    案例演示:

    制作一个矩形变成圆形的动画,整个动画播放时间持续了10s钟。

    HTML:

    <div>Hover Me</div>

    CSS:

    @keyframes toradius{
      from {
        border-radius: 0;
      }
      to {
        border-radius: 100%;
      }
    }
    div {
       200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: #fff;
      background: green;
      margin: 20px auto;
    }
    div:hover {
      animation-name: toradius;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-delay: .1s;
    }

    鼠标移入

    鼠标移出

  • 相关阅读:
    JZOJ1495 宝石
    JZOJ1496 页
    jzoj1497. 景点中心
    2019.8.2总结
    学习进度报告2021/3/19
    学习进度报告2021/3/18
    《学会提问》读书笔记2
    学习进度报告2021/3/17
    学习进度报告2021/3/16
    学习进度报告2021/3/15
  • 原文地址:https://www.cnblogs.com/gulan/p/5821075.html
Copyright © 2011-2022 走看看