zoukankan      html  css  js  c++  java
  • CSS总结

    自定义动画

    1、animation-name(动画名称):
    元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
    语法:
    animation-name :none | <identifier>

    例:
    div{
    -webkit-animation-name : FromLeftToRight;
    animation-name : FromLeftToRight;

    2. keyframes (关键帧):
    被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
    语法:
    @keyframes <identifier> {
    [ from | to | <percentage> ]{ sRules } ] [,*]
    }

    例1:@keyframes FromLeftToRight{ 

    from {left: 0; }

    to {left: 800px; } 

    }

    例2:

    HTML:<div class="box"></div>

    CSS:

    .box {
    100px;
    height: 100px;
    background: #5CBE3E;
    margin: 5px;
    animation-name: fromLeftToRight;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    }

    .box:hover {
    animation-play-state: paused;
    }

     @keyframes fromLeftToRight {
         from {
         margin-left: 0;
                 }
           to {
         margin-left: 300px;
               }
    }

    3、animation-duration(动画时间)

    设置对象动画的持续时间

    语法:

    animation-duration:<time>

    例:

    div{

          -webkit-animation-duration:1s;

                      animation-duration:1s

    }

    4、设置对象动画的过渡速度类型

    语法:

    animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

    例:

    div{

          -webkit-animation-timing-function : ease-in;

           animation-timing-function : ease-in;

    }

    5. animation-delay(动画延迟时间):

    语法:

    animation-delay:<time>

    例:

    div{

          -webkit-animation-delay : 1s;

          animation-delay : ease-in;

    }

    6. animation-iteration-count(动画执行次数):

    设置对象动画的延迟时间

    语法:

    animation-iteration-count:infinite | <number>

    infinite表示无限次数

    例:

    div{

          -webkit-animation-iteration-count : 2;

          animation-iteration-count : 2;

    }

  • 相关阅读:
    字符串数组
    常用函数
    判断是否是素数回文数
    杨辉三角
    惨痛的教训 没有 脑子的我
    剪缎带
    ?????函数不起作用
    C#3
    celery 原理和组件
    vue检查用户名是否重复
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5775912.html
Copyright © 2011-2022 走看看