欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css动画:animation的常用样式

程序员文章站 2022-06-28 18:53:20
animation动画定义一个动画:/*设置一个关键帧,定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: translate(200px,200px);} 75%{transform: translate(0,200px);}...

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的特性;

本文地址:https://blog.csdn.net/m0_47611688/article/details/107900491