标签:
一、介绍
keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则。
语法:@keyframes animationname {keyframes-selector{css-styles;}}
在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。
在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到
一种在不断变化的效果。
举个栗子:
@keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } div { width: 150px; height: 100px; background: red; color:#fff; margin: 20px auto; } div:hover { animation: changecolor 5s ease-out .2s; }
标签:
原文地址:http://www.cnblogs.com/afighter/p/5732710.html