zoukankan      html  css  js  c++  java
  • css3 动画

    1,animation-name:none | <identifier> [ , none |

    检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

    2,animation-duration

    检索或设置对象动画的持续时间

    • 如果提供多个属性值,以逗号进行分隔。
    @keyframes name(
        from{
        hight:0px
       }
        to{
        hight:100px;
       }
    )
    div:hover{
      animation-name:name;
      animation-duration:1s;

    }

    3,animation-timing-function

    检索或设置对象动画的过渡类型

    linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 
    ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 
    ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
    ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
    ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
    cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内 
    

    4,animation-delay

    检索或设置对象动画的延迟时间

    5,animation-iteration-count

    检索或设置对象动画的循环次数

    • 如果提供多个属性值,以逗号进行分隔。

    6,animation-direction

    检索或设置对象动画在循环中是否反向运动

    • 如果提供多个属性值,以逗号进行分隔。

    取值:

    normal:
    正常方向
    alternate:
    正常与反向交替

    7,animation-play-state

    检索或设置对象动画的状态

    取值:

    running:
    运动
    paused:
    暂停

    8,animation-fill-mode

    检索或设置对象动画时间之外的状态

    取值:

    none:
    默认值。不设置对象动画之外的状态
    forwards:
    设置对象状态为动画结束时的状态
    backwards:
    设置对象状态为动画开始时的状态
    both:
    设置对象状态为动画结束或开始的状态  
  • 相关阅读:
    内置函数
    递归函数:
    函数(迭代器与生成器)
    函数的装饰器
    函数:(函数的名字,闭包)
    函数(命名空间,作用域,嵌套)
    函数:(定义,调用,返回值和参数)
    hdu 4267 A Simple Problem with Integers(线段树)
    hdu 2089 不要62 hdu 3555 Bomb (数位DP)
    poj 2955 Brackets (区间DP)
  • 原文地址:https://www.cnblogs.com/hunting/p/5775195.html
Copyright © 2011-2022 走看看