Omina

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

CSS3 动画

用 @keyframes 创建动画

@keyframes ianimation
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

选择一个元素

div{
    width: 500px;
    height: 800px;
    border: solid 1px #fff;
}

把它绑定到一个选择器

div {
    animation-name: ianimation;/* 动画的名称 */
    animation-duration: 5s;/* 动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function: linear;/* 动画的速度 */
    animation-delay: 2s;/* 动画何时开始 */
    animation-iteration-count: infinite;/* 动画被播放的次数。默认是 1 */
    animation-direction: alternate;/* 动画是否在下一周期逆向地播放 */
    }

运行

<div></div>

版本控制