zoukankan      html  css  js  c++  java
  • 第二十七节-动画animation以及与transform的冲突

    与transition 相近 但需要使用 @keyframes 动画名 组件 , from{}起始态,to{}终态 from 与to 之间不用;

    animaton-iteration-count 动画次数  无限次是infinite

                                                         eg:animation:run 1s 2s 2   这个2是动画两次的意思

       animaton-delay: 注意动画延迟时间只存在一开始的时候,不会在count>1时而发生多次延迟

    animation-direction:动画方向  normal(默认) 到达最终态,瞬回起始态。

                                                   alternate:先正再反    到达最终态,按轨迹返回。(配合次数2)

                                                       eg:animation run 1s 2s 2 alternate

                                                   reverse:反向

                                                   alternate-reverse:先反再正,之后顺回起始点

    可以写百分比,括号里可以放多个属性:,不同百分比,代表不同时间段的变化

    animation-fill-mode:决定结束状态:  %0 与原始态有区别

    none:原始态开始 回到原始态

    forwards:原始态开始,到100%

    backwards:%0开始,到原始状态

    both:%0开始 ,到100%

    animation-play-state:动画运行状态

                                     running:运行

                                     paused:暂停

    使用方法:

     当使用transform 的时,动画里回覆盖,故要在动画里要给上相应值:

                 

                                                   

                                          

                       

  • 相关阅读:
    为什么新买的音响连接上电脑后有很强的杂音(电流声)?
    USB2.0 Camera驱动
    如何重命名多张图片的名称
    网络共享:[25]组策略
    线刷宝“华为荣耀畅玩7 (DUA-AL00)”刷机教程
    电信手机卡被锁,忘记了PIN码,怎么办?
    [转]glyphicons-halflings-regular字体 图标
    牛年祝福语大全
    HYQiHei GES字体汉仪旗黑全套字体
    得实AR-530K打印机驱动 vB5.5官方版
  • 原文地址:https://www.cnblogs.com/yzdwd/p/12176295.html
Copyright © 2011-2022 走看看