• 技术文章 >web前端 >css教程

    使用css3中的什么规则来定义动画

    青灯夜游青灯夜游2021-04-08 10:18:01原创98

    使用css3中的“@keyframes”规则来定义动画。“@keyframes”规则用于指定动画规则,定义一个CSS动画的一个周期的行为,可以创建简单的动画;可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。

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

    @keyframes是CSS3的一种规则,可以用来定义CSS动画的一个周期的行为,可以创建简单的动画。

    动画与转换类似,因为它们都是随时间改变CSS属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画。因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的。因此,@keyframes规则里是由一组封装的CSS样式规则组成的,这些规则描述了属性值如何随时间变化。

    然后,使用不同的CSS animation(动画)属性,可以控制动画的许多不同方面,包括动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。动画也可以延迟其开始时间。

    @keyframe规则由关键字“@keyframe”组成,后面接着是给出动画名称的标识符(将使用animation-name引用),随后是通过一组样式规则(用大括号分隔)。然后,通过使用标识符作为animation-name属性的值,将动画应用于元素。

    语法:

    @keyframes animation-name {keyframes-selector {css-styles;}}
    /* 定义动画n */
    @keyframes your-animation-name {
        /* style rules */
    }
    /* 将其应用于元素 */
    .element {
        animation-name: your-animation-name;
        /* 或者使用动画速记属性 */
        animation: your-animation-name 1s ...
    }

    在大括号内,定义关键帧或路径点,这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如,一个简单的动画@keyframe可能如下所示:

    @keyframes change-bg-color {
        0% {
            background-color: red;
        }
        100% {
            background-color: blue;
        }
    }

    0%”和“100%”是关键帧选择器,每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。

    还可以使用选择器关键字from和to,而不是分别使用0%和100%,因为它们是等价的。

    @keyframes change-bg-color {
        from {
            background-color: red;
        }
        to {
            background-color: blue;
        }
    }

    关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意,百分比单位说明符必须用于百分比值。因此,' 0 '是一个无效的关键帧选择器。(学习视频分享:css视频教程

    注意:为了获得浏览器的最佳支持,请始终指定0%和100%选择器。

    css @keyframes的使用示例:

    1、定义动画发生的空间

    HTML代码:

    <div class="container">
      <div class="element"></div>
    </div>

    2、使用@keyframes规则创建简单动画

    css代码

    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

    更多编程相关知识,请访问:编程视频!!

    以上就是使用css3中的什么规则来定义动画的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css3 @keyframes 动画
    上一篇:css中可以实现旋转效果的属性是什么 下一篇:css3支持为网页添加多个背景图片吗
    第15期线上培训班

    相关文章推荐

    • CSS3如何实现流星雨效果?(代码示例)• 详解CSS3+SVG滤镜实现不规则边框的方法• css3新增属性有哪些• css3中新增加的颜色模式有哪些• 用css3实现一个奥运五环

    全部评论我要评论

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

    PHP中文网