全国服务热线:4008-888-888

技术知识

css动漫实际效果之anim●▂●ation的常见款式

animation动漫

界定一个动漫:

/*设定一个重要帧,界定动漫每一步实行的姿势*/
@keyframes mybox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform: translate(0,0);}
        }
/*引入重要帧,设定动漫的实行款式*/
animation: mybox 5s 1s infinite;

注:

1、动漫完毕后返回原始部位。
2、from->0%    to ->100%

animation-name: 动漫的姓名,(务必存有)

animation-duration: 动漫不断的時间

animation-delay:要求多久時间后出現动漫实际效果

animation-iteration-count: 界定动漫实行的频次

默认设置值是:1; 无尽频次:infinite

animation-timing-function: 界定动漫的实际效果animation-fill-mode:

none:默认设置值;  款式在延迟时间以后起效;
backwards:  款式在延迟时间以前起效;
forwards: 在动漫完毕以后,停在终点站部位;
both:  具有backwards和forwards的特点;

小结

到此这篇有关css动漫实际效果之animation的常见款式的文章内容就详细介绍到这了,大量有关css animation的常见款式內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服