CSS 动画@keyframes规则
@keyframes规则
CSS中的@keyframes规则,可以用于指定动画的样式,即在该规则下,动画将在指定的时间内逐渐从当前样式转变为新的样式。要让动画生效,需要将@keyframes规则下的动画绑定到该元素。
语法
来源网络,仅供参考:
@keyframes animationName {
from {attribute:value;...}
to {attribute:value;...}
}
/*通过animation-name: animationName来绑定动画*/
@keyframes规则实例代码,及在线编辑器
下方实例通过@keyframes规则设计了一个名为skyblue2blue的动画,然后将其绑定到一个div上来实现div背景颜色变化的动画:
<div id='d1'></div>
<style>
@keyframes skyblue2blue {
from {background-color:skyblue;}
to {background-color:blue;}
}
#d1{width:50%;height:50%;background-color:skyblue;animation-name:skyblue2blue;animation-duration:2s;}
</style>