CSS animation动画使用详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS animation动画使用详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、animation动画的使用步骤

第一步:定义动画

第二步:使用动画

二、animation的复合属性

三、animation的拆分属性

四、动画属性文章来源地址https://www.toymoban.com/news/detail-586415.html

一、animation动画的使用步骤

第一步:定义动画

//changes为定义的动画名称
  //①两种状态的变化
 @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }

//②多种状态的变化 
//百分比为动画占总时长的占比
  @keyframes changes {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }

第二步:使用动画

//给需要调用动画的类名或标签加上animation change为动画名称 1s为动画时长
.box{
    animation:change 1s;
}

二、animation的复合属性

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时的状态

//animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
//liner为匀速
animation:change 1s linear
//step(3) 为分布动画
animation:change 1s step(3)
 // 5s为延迟时间 infinite无限 alternate反方向 
animation: change 1s steps(3) 5s infinite alternate;
//执行完毕时的状态(最开始backwards,最终forwards) 不能设置重复次数 与 动画方向
animation:change 1s forwards

三、animation的拆分属性

四、动画属性

逐帧动画(配合精灵图使用)animation-timing-function:step(N) N为将动画分成N份(与精灵图的小图个数相同)
多组动画 animation:动画1,动画2,动画N (用逗号隔开)

 .box {
            width: 140px;
            height: 140px;
            background-image: url(./images/bg.png);
            /* 跟多个动画用逗号隔开 */
            animation: run 1s steps(12) infinite, moves 1s forwards;
        }
        /* 定义动画 */
        
        @keyframes run {
            /* 背景图改位置 从0的位置到图片的最大宽度*/
            from {
                background-position: 0 0;
            }
            to {
                /* 往左挪时负的 */
                background-position: -1680px 0;
            }
        }
        /* 定义盒子移动的动画 */
        
        @keyframes moves {
            /* 如果最初始的动画开始样式可以省略from */
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(800px);
            }
        }

到了这里，关于CSS animation动画使用详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！