动画

最新推荐文章于 2023-02-15 16:49:29 发布

dianovo7

最新推荐文章于 2023-02-15 16:49:29 发布

阅读量194

点赞数 1

本文链接：https://blog.csdn.net/dianovo7/article/details/111314470

版权

动画

1.忍术 忍者之术
    2.结印

    之前使用过渡遇到的一些问题：
    1.需要重复过渡效果时无法实现
    2.只能通过hover等方式才能出发。

    动画：
    1.通过@keyframs定义动画。
    2.在指定元素中，通过animation属性来调用动画。

    1.定义动画
    格式：
        @keyframes 动画名 {
            from{
                /* 初始帧 */
            }
            to{
                /* 结束帧 */
            }
        }
    【注】动画名不要起关键字，最好见名知意。

动画的调用：
通过animation属性来调用动画。

    animation-name：动画名称
    animation-duration 执行一次动画的完成时间。
    animation-iteration-count: 动画的执行次数  infinite 表示无数次。
    animation-delay:  动画延迟执行的时间。
    animation-fill-mode:
        forwards：在动画结束后，盒子保持结束帧状态。
        backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态
        both  backwards forwards都生效
        none(默认值)
    animation-direction: 动画的执行方式
        alternate：交替执行。 
        normal 正常（默认）
        reverse 反向 从结束帧开始到初始帧结束。
    【注】alternate 反向也会算一次执行时间。

    animation-timing-function:linear;
        linear 匀速
        ease-in 加速
        ease-out 减速
        ease-in-out 先加速后减速

    animation-play-state 动画运行状态
        paused:暂停
        running 运行

    【注】动画属性要有中间状态，一般是数值型。