zoukankan      html  css  js  c++  java
  • css3 animate基本属性

                                                                          Css3animate属性

    属性

    描述

    Css

    Animation

    所有动画属性的简写属性,除了animation-play-state属性

    Animation:name duration timing-function delay iteration-count

    direction;

    3

    Animation-name

    规定@keyframes动画的名称。

    animation-name:keyframename|none

    3

    Animation-duration

    规定完成一个周期所花费的秒或毫秒。默认是0;

    Animation-duration:time;

    3

    Animaion-timing--function

    规定动画的速度曲线。默认是ease。

    3

    Animation-delay

    规定动画何时开始。默认是0

    Animation-delay:time

    3

    Animation-iteration-count

    规定动画被播放的次数。默认是1.

    Animation-iteration-count:n|infinite

    3

    Animation-direction

    规定动画是否在下一周期逆向的播放。默认是normal。

    Normal是默认值。动画应该正常播放

    Alternate动画应该轮流反向播放

    3

    Animation-play-state

    规定动画是否正在运行或暂停,默认值是”running”。

    Animation-play-state:paused|running;

    Paused:规定动画已暂停

    Running:规定动画正在播放

    3

                                                Css3@keyframes规则

    语法:

             @keyframe animationname{keyframes-selector{css-styles;}}

    描述

    Animationname

    必需,定义动画的名称

    Keyframes-selector

    必需。动画时长的百分比。

    合法值:0-100%

    From(与0%相同)

    To(100%相同)

    Css-styles

    必需。一个或多个合法的css样式属性

                                                                                   定格动画

    描述

    Animationend

    当animation执行完成后js调用的事件

    Animationend

    Moz内核

    webkitanimationEnd

    Webkit内核

    oaimationEnd

    Opera内核

    MSAnimationEnd

    Ie内核

    描述

    Transitionend

    当transition执行完成之后js调用的事件

    Transitionenf

    Moz内核

    webkittransitionEnd

    Webkit内核

    otransitionEnd

    Opera内核

    MSTransitionEnd

    IE内核

    以上是animate的基本属性

  • 相关阅读:
    AS400小结(2)
    java循环链表
    RPG程序中一些小结
    学习AS400心得体会
    Vue学习二
    Vue学习一
    VC视图的多页打印(转)
    MFC对象拖拽功能(不只是文件拖拽)(转)
    Silverlight如何显示、输入上标和下标?
    【2011】Google Maps API3
  • 原文地址:https://www.cnblogs.com/TzSteady/p/7396849.html
Copyright © 2011-2022 走看看