首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css3卡通系列之@keyframes规则

2014-01-17 
css3动画系列之@keyframes规则html5+css3出现以后,很多优秀的动画效果因为个别主流浏览器不支持的原因,被

css3动画系列之@keyframes规则

html5+css3出现以后,很多优秀的动画效果因为个别主流浏览器不支持的原因,被使用的很少,现在很多做微营销的公司,很多产品是在微信里浏览和使用,微信默认浏览器支持的都是webkit内核,所有很多css3的特性都是支持的,可以大胆使用,尤其是一些动画样式,今天主要介绍一下css3的动画@keyframes规则:

?

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

css代码:

div{

? ? ?width:200px;

? ? ?height:200px;

? ? ?background:red;

? ? ?animation:case?5s;?/* 5秒钟执行一次这个动画case */

? }

/*常见动画规则case为背景色由红色变为蓝色*/

@-webkit-keyframes case{
???from{ background:red; }
? ? ? ?to{?background:blue;?}

? ? }

?

将以上css代码加入到页面中就可以看到效果啦O(∩_∩)O

?

注:@keyframes一定要结合animation才能实现动画效果animation,animation其他文章会详解介绍。

? ? ? ? ??

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

?

Chrome 和 Safari 需要前缀 -webkit-

Firefx需要前缀:-moz-

Opera:-o-

?

热点排行