• css。过渡动画


    1.transition-property(过渡动画)

      

    div{
      -webkit-transition-property:width,height,color;
      transition-property:width,height,color
     }

    2.transition-duration(过渡动画所需时间)

        div{

          -webkit-trnasition-duration:5s;

              transition-duration:5s;

        }

    3.transition-timing-function(动画--过渡函数)

      ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))

      linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))

      ease-in:加速的过渡效果(等于cubic-bezier(0,0,0.58,1))

      ease-out:减速的过渡效果(等于cubic-bezier(0,0,0.58,1))

      ease-in-out:加速然后减速(等于cubic-bezier(0.42,0,0.58,1.0))

      cubic-bezier(n,n,n,n)0-1之间的数值

    div{
             -webkit-transition-timing-function:ease-in;
                     transition-timing-function:ease-in;
    }

    4.transition-delay(动画-过渡延迟时间)

    div  {
           -webkit-transition-delay:.1s;
                        transition-delay:.1s;
    }

    5.transition(过渡)

      transition:[none|<transition-property>]||<transition-duration>||

      <transition-timing-function>||<transition-delay>[,*]

    自定义动画

     1.animation-name(动画名称)

        div{

            webkit-animation-name:FromLeftToRight;

    }

    2.keyframes(关键帧)

      @keyframes<identifier>{

        from{

      }

        to{

      }

      }

    3.animation-duration(动画时间):

        /*动画的持续时间*/

      animation-duration:<time>

    4.animation-timing-function(动画的过渡速度):

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

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

      div{

          -webkit-animation-delay:1s;

      }

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

      animation-iteration-count:infinite|<number>

    div{

      -webkit-animation-iteration-count:2;

    }

    7.animation-direction(动画的顺序)

    animation-direction:normal|reverse|alternate|alternate-reverse

    normal:正常方向  reverse:反方向运行  

    alternate:动画先正常运行再反方向运行,并持续交替运行

    alternate-reverse:动画先反运行再正方向运行,并持续交替运行

    8.animation-play-state(动画的状态)

      animation-play-state:running|paused

      running:运动  paused:暂停

    9.animation-fill-mode

      animation-fill-mode:none|forwards|backwards|both

      none:默认值,不设置对象动画之外的状态

      forwards:设置对象状态为动画结束时的状态

      backwards:设置对象状态为动画开始时的状态

      both:设置对象为动画结束或开始的状态

    10.animation-fill-mode(动画复合属性)

       

     

  • 相关阅读:
    1105 Spiral Matrix (25分)(蛇形填数)
    1104 Sum of Number Segments (20分)(long double)
    1026 Table Tennis (30分)(模拟)
    1091 Acute Stroke (30分)(bfs,连通块个数统计)
    1095 Cars on Campus (30分)(排序)
    1098 Insertion or Heap Sort (25分)(堆排序和插入排序)
    堆以及堆排序详解
    1089 Insert or Merge (25分)
    1088 Rational Arithmetic (20分)(模拟)
    1086 Tree Traversals Again (25分)(树的重构与遍历)
  • 原文地址:https://www.cnblogs.com/yek9520/p/5774881.html
Copyright © 2020-2023  润新知