css动画效果之animation的常用样式

css动画效果之animation的常用样式:

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的常用样式

发表评论

共享资源网提供最优质的资源集合

充值中心 开启会员