CSS3动画解析

1、使用@keyframes规则创建动画
语法

 @keyframes animationname {keyframes-selector {css-styles;}}

animationname 定义animation的名称,必需。
keyframes-selector 动画持续时间的百分比(0%-100%),必需。

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

示例

@keyframes colam{
	0%{background:#fa0;}
	25%{background:#f60;}
	50%{background:#f40;}
	100%{background: #f10;}
}
@-webkit-keyframes colam{   /*Safari 与 Chrome */
	0%{background:#fa0;}
	25%{background:#f60;}
	50%{background:#f40;}
	100%{background: #f10;}
}

2、引用动画
使用简写属性把 animation 绑定到一个选择器上,如下:
animation:动画的名称 规定动画时长 播放次数
语法

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state;
animation:名称 - 动画时长 - 动画完成一个周期 - 延迟间隔 - 播放次数 - 轮流反向播放 - 当动画不播放时,要应用到元素的样式 - 动画是否运行或已暂停

示例

.colorad{
	width:100px;
	height:100px;
	animation:colam 5s infinite;
	-moz-animation:colam 5s infinite; /* Firefox */
	-webkit-animation:colam 5s infinite; /*Safari 与 Chrome */
	-o-animation:colam 5s infinite; /* Opera */	
}

3、页面调用

<div class="colorad"></div>
发布了4 篇原创文章 · 获赞 0 · 访问量 55
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览