php 中css3,CSS3 - animation - 说中

CSS3 animation

定义keyframes

@keyframes colorchange {

0% { background-color: #00F; /* from: blue */ }

25% { background-color: #F00; /* red */ }

50% { background-color: #0F0; /* green */ }

75% { background-color: #F0F; /* purple */ }

100% { background-color: #00F; /* to: blue */ }

}

@-webkit-keyframes colorchange {

0% { background-color: #00F; /* from: blue */ }

25% { background-color: #F00; /* red */ }

50% { background-color: #0F0; /* green */ }

75% { background-color: #F0F; /* purple */ }

100% { background-color: #00F; /* to: blue */ }

}

对于0%这个也可以用from关键字来替代，同样的可以用to来代替100%，过渡状态，你可以定义任何百分比；

将animation应用到元素的属性写法，和transition差不太多：

div:hover {

animation-name: colorchange;

animation-duration: 1s;

animation-timing-function: linear;

animation-delay: 1s;

animation-fill-mode:forwards; /*forwards表示让动画停留在结束状态*/

animation-direction: normal;

animation-iteration-count: 3; /*用来指定动画循环的次数，无限循环用infinite*/

}

/****简写****/

div:hover {

animation: 1s 1s rainbow linear 3 forwards normal;

}

animation-direction有四个值：

normal：默认，从0%执行到100%

reverse：动画从100%执行到0%

alternate：动画在0%到100%之间往复执行;

alternate-reverse与alternate一致，不过是从100%开始;

animation-play-state

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态;

如果想让动画保持突然终止时的状态可以使用animation-play-state: running;

浏览器支持

IE 10和Firefox(>= 16)支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

也就是说，实际运用中，代码必须写成下面的样子：

div:hover {

-webkit-animation: 1s rainbow;

animation: 1s rainbow;

}

@-webkit-keyframes rainbow {

0% { background: #c00; }

50% { background: orange; }

100% { background: yellowgreen; }

}

@keyframes rainbow {

0% { background: #c00; }

50% { background: orange; }

100% { background: yellowgreen; }

}

参考资料：