css3的animation 动画

原创 2013年12月04日 13:19:38

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。


CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

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


CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3


CSS3 动画代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{

	color:#ffffff;
	font-weight:bold;
	font:bold 14px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	border-radius:5px;
	-webkit-border-radius:5px;
	
	width:100px;
	height:100px;
	background:#F00;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-direction:alternate;
	animation-iteration-count:infinite;
	animation-play-state:running;
	
	-moz-animation-name:myfirst;
	-moz-animation-duration:5s;
	-moz-animation-timing-function:linear;
	-moz-animation-delay:2s;
	-moz-animation-direction:alternate;
	-moz-animation-iteration-count:infinite;
	-moz-animation-play-state:running;
	
	-o-animation-name:myfirst;
	-o-animation-duration:5s;
	-o-animation-timing-function:linear;
	-o-animation-delay:2s;
	-o-animation-direction:alternate;
	-o-animation-iteration-count:infinite;
	-o-animation-play-state:running;
	
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-direction:alternate;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-play-state:running;
}
/*
@keyframes myfirst{
	form{background:#F00;}
	to {background:#0F0;}
}
*/
@keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-moz-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-o-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{
	0% { transform:rotate(0deg); background:#F00; color:#0F0; left:0px; top:0px;}
	25% {transform:rotate(10deg);background:#0F0; color:#F00; left:200px; top:0px;}
	50% {transform:rotate(20deg); background:#F0F; color:#FF0; left:200px; top:200px}
	75% {transform:rotate(0deg); background:#999; color:#FFF; left:0px; top:200px;}
	100% {transform:rotate(-360deg); background:#00F; color:#0FF; left:0px; top:0px;}
}
</style>
<title>无标题文档</title>
</head>

<body>

<div>这个是css3的动画效果(在ie9和之前的版本不支持)</div>
</body>
</html>

CSS3 动画效果图


移动中的效果图:


版权声明:原创文章,请标明出处~~~

CSS3动画——@keyframes规则和animation属性

简介:@keyframes定义关键帧,即动画每一帧执行的是什么,animation是来定义动画的每一帧如何执行的。一.@keyframe 语法:@keyframes animationname {ke...

浅谈CSS3新特性——动画animation

animation-timing-function:linear指定动画从头到尾的速度相同 animation-fill-mode:forwards在动画结束后(由 animation-iterati...

css3 动画(animation)、渐变(transition)和改变(transform)整理

这两天在优化页面,准备做一些

CSS3 animation实现点点点loading动画

一、再续前缘 去年夏天,写了篇名为“CSS3 animation渐进实现点点点等待提示效果”的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实现的...

CSS3动画animation语音滚动

现的图像动画效果大致是这样的:语音滚动! 【代码效果】 CSS3动画animation语音滚动 html,body { padding: 0; margin: 0; } .r...

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...

CSS3 动画属性 animation 的基本用法

CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。 ...

CSS3之transition和animation动画

在写完css3之变形后,感觉一下子对transform的使用清晰了很多,所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能 本文示例中使用到的h...

css3 动画之transition,animation

css3动画   csss3实现动画的方式主要有两种方式:一种是用transition过渡效果来实现动画,另外一种直接使用animation配合keyframe来实现。虽然这两种方式都能实现动画效...

CSS3特效之动画animation

animation 渐变背景动画 悬停背景渐变 @-webkit-keyframes changeBg{ 0%{background-color:#000;} 20%{backgroun...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的animation 动画
举报原因:
原因补充:

(最多只允许输入30个字)