CSS3动画定义例子
摘自:http://www.css88.com/archives/4381
第一个例子是滚动条:(简化版chrome & safari)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> .progress-bar {background-color: #1A1A1A;height: 25px;padding: 5px;width: 350px;margin: 50px 0;-webkit-border-radius: 5px;-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;}.progress-bar span {display:inline-block;height:100%;background-color:#34C2E3;border-radius : 3px;/**定义宽度变化的动画效果**/-webkit-transition: width .4s ease-in-out;-webkit-background-size: 30px 30px;/**定义边框的质感**/-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;background-size: 30px 30px;background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);-webkit-animation: animate-stripes 3s linear infinite;} @-webkit-keyframes animate-stripes {0% {background-position: 0 0;} 100% {background-position: 60px 0;}}</style></head><body><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; /* 定义动画的过程 */ -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in; -moz-transition: -moz-transform .5s ease-in, background .5s ease-in; -o-transition: -o-transform .5s ease-in, background .5s ease-in; transition: transform .5s ease-in, background .5s ease-in;}div:hover { /* 定义动画的状态 */ -webkit-transform: rotate(180deg) scale(2); -moz-transform: rotate(180deg) scale(2); -o-transform: rotate(180deg) scale(2); -transform: rotate(180deg) scale(2); background: blue;}</style></head><body><div></div></body></html>