• 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的基本属性

  • 相关阅读:
    Spring AOP功能
    EasyUI组件treegrid构建树形组织机构
    EasyUI树形表格显示Json数据
    Java 操作Redis
    Linux安装Redis、后台运行、系统自启动
    SpringBoot-Helloworld
    中小后台系统UI框架--EasyUI
    Spring注解--实现applicationContext.xml效果
    Mybatis XML映射文件
    python初学者必看学习路线图!!!
  • 原文地址:https://www.cnblogs.com/TzSteady/p/7396849.html
Copyright © 2020-2023  润新知