css常用样式-css动画效果有哪些常见的动画风格？

本文主要向大家介绍一下css动画的效果css常用样式，常用的动画样式有哪些。 动画效果常用的动画风格有哪些”这篇文章。

动画 动画

定义一个动画：

/*设置一个关键帧，定义动画每一步执行的动作*/
@keyframesmybox{
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:mybox5s1sinfinite;

笔记：

1. 动画结束后返回初始位置。 2.从->0%到->100%

animation-name：动画的名称css常用样式，（必须存在）

动画持续时间：动画持续时间

animation-delay：指定动画效果在多长时间后出现

animation-iteration-count：定义动画执行的次数

默认值为：1； 无限次：无限次

animation-timing-function：定义动画animation-fill-mode的效果：

无：默认值； 样式在延迟后生效； backs：样式在延迟之前生效； forwards：动画结束后停在结束位置； Both：具有向后和向前的特性；