zoukankan      html  css  js  c++  java
  • CSS3之animation属性

    CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调用它,如下所示:

    .element {
      animation: pulse 5s infinite;
    }
    
    @keyframes pulse {
      0% {
        background-color: #001F3F;
      }
      100% {
        background-color: #FF4136;
      }
    }
    

      

    <!DOCTYPE html>
    <html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
        <title></title>
        <style>
            .element {
                 100%;
                height: 100%;
                animation: pulse 5s infinite;
            }
    
            @keyframes pulse {
                0% {
                    background-color: #001F3F;
                }
    
                100% {
                    background-color: #FF4136;
                }
            }
            html,
            body {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="element"></div>
    </body>
    </html>
    

      

    每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特定时刻应该发生的情况。 例如,0%是动画的开始,而100%是动画的结束。可以通过简写animation属性或它的八个子属性控制这些关键帧,以更好地控制应该如何操纵这些关键帧。

    子属性

    animation-name:声明要操纵的@keyframes规则的名称。

    animation-duration:动画完成一个周期所需的时间。

    animation-timing-function:建立预设的加速曲线,例如缓动或线性。

    animation-delay:加载元素到动画序列开始之间的时间。

    animation-direction:设置循环后动画的方向。 其默认值在每个周期重置。

    animation-iteration-count:应该执行动画的次数。

    animation-fill-mode:设置在动画之前/之后应用的值。

    例如,您可以将动画的最后状态设置为保留在屏幕上,或者可以将其设置为切换回动画开始之前的状态。

    animation-play-state:暂停/播放动画。

    可以如下面所示使用这些子属性:

    @keyframes stretch {
      /* 这里声明动画动作 */
    }
    
    .element {
      animation-name: stretch;
      animation-duration: 1.5s; 
      animation-timing-function: ease-out; 
      animation-delay: 0s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-fill-mode: none;
      animation-play-state: running; 
    }
    
    /* 等同于*/
    
    .element {
      animation: 
        stretch
        1.5s
        ease-out
        0s
        alternate
        infinite
        none
        running;
    }
    

      

    <!DOCTYPE html>
    <html>
    
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
        <title></title>
        <style>
            .element {
                height: 250px;
                 250px;
                margin: 0 auto;
                background-color: red;
                animation-name: stretch;
                animation-duration: 1.5s;
                animation-timing-function: ease-out;
                animation-delay: 0;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-fill-mode: none;
                animation-play-state: running;
            }
    
            @keyframes stretch {
                0% {
                    transform: scale(.3);
                    background-color: red;
                    border-radius: 100%;
                }
    
                50% {
                    background-color: orange;
                }
    
                100% {
                    transform: scale(1.5);
                    background-color: yellow;
                }
            }
    
            body,
            html {
                height: 100%;
            }
    
            body {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    
    <body>
        <div class="element"></div>
    </body>
    
    </html>
    

      

    以下是这些子属性中每个属性可以采用的值的完整列表:

     
    animation-timing-function
    ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
    animation-duration
    Xs or Xms
    animation-delay
    Xs or Xms
    animation-iteration-count
    X
    animation-fill-mode
    forwards, backwards, both, none
    animation-direction
    normal, alternate
    animation-play-state
    paused, running, running
     

    多个步骤

    如果动画具有相同的开始和结束属性,则在@keyframes中用逗号分隔0%和100%值很有用:

    @keyframes pulse {
      0%, 100% {
        background-color: yellow;
      }
      50% {
        background-color: red;
      }
    }
    

      

    多个动画

    您也可以用逗号分隔值,以在选择器上声明多个动画。 在下面的示例中,我们想在@keyframe中更改圆的颜色,同时还要将其与另一边左右轻轻一碰。

    .element {
      animation: 
        pulse 3s ease infinite alternate, 
        nudge 5s linear infinite alternate;
    }
    

      

    <!DOCTYPE html>
    <html>
    
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
        <title></title>
        <style>
            .element {
                height: 400px;
                 400px;
                background-color: red;
                animation:
                    pulse 3s ease infinite alternate,
                    nudge 5s linear infinite alternate;
                border-radius: 100%;
            }
    
            @keyframes pulse {
    
                0%,
                100% {
                    background-color: red;
                }
    
                50% {
                    background-color: orange;
                }
            }
    
            @keyframes nudge {
    
                0%,
                100% {
                    transform: translate(0, 0);
                }
    
                50% {
                    transform: translate(150px, 0);
                }
    
                80% {
                    transform: translate(-150px, 0);
                }
            }
    
    
            html,
            body {
                height: 100%;
            }
    
            body {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    
    <body>
        <div class="element"></div>
    </body>
    
    </html>
    

      

    性能

    对大多数属性进行动画处理是性能方面的考虑,因此在对任何属性进行动画处理之前,我们应谨慎行事。 但是,可以安全地对某些组合进行动画处理:

    transform: translate()

    transform: scale()

    transform: rotate()

    opacity

    哪些属性可以设置动画?

    MDN有一个可以设置动画的CSS属性列表。 可设置动画的属性倾向于颜色和数字。 不可动画属性的一个示例是背景图像。

  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/f6056/p/11635785.html
Copyright © 2011-2022 走看看