一、CSS3动画库 Animatable
什么是css3动画?
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3带来了圆角，半透明，阴影，渐变，多背景图等新的特征，轻松实现了设计稿中常见的图层样式，用简洁的代码替代图片，代替了多余的空标签。
现成的CSS3动画库： http://leaverou.github.io/animatable/
background-color
.background-color { background:#708090; animation:1s ease 0s alternate none infinite background-color;}
@keyframes background-color{
from{ background:#708090;}
to{ background:#000;}
}
1
background-position
background-position 属性设置背景图像的起始位置，默认值：0% 0%，效果等同于left top
范例一：
.background-position-1 { background-image: -moz-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;}
@keyframes background-position-1{
from{ background-position:0 0;}
to{ background-position:100% 100%;}
}
1
范例二：
.background-position-2 { background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(-45deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;}
@keyframes background-position-2{
from{ background-position:3px 0, 3px 0, 15px -150px, 15px -150px;}
to{ background-position:3px -70px, 3px -70px, 15px -80px, 15px -80px;}
}
1
background-size
background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
.background-size {background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center; animation:1s ease 0s alternate none infinite background-size;}
@keyframes background-size{
from{ background-size:5px 5px;}
to{ background-size:150px 150px;}
}
1
border-radius
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
范例一
.border-radius-1 { animation:1s ease 0s alternate none infinite border-radius-1;}
@keyframes border-radius-1{
from{ border-radius:0;}
to{ border-radius:50%;}
}
1
范例二
.border-radius-2 { animation:1s ease 0s alternate none infinite border-radius-2;}
@keyframes border-radius-2{
from{ border-radius:0 100%;}
to{ border-radius:100% 0;}
}
1
border-width
范例一
.border-width-1 {border-style:solid; border-color: black; animation:1s ease 0s alternate none infinite border-width-1;}
@keyframes border-width-1{
from{ border-width:0;}
to{ border-width:75px;}
}
1
范例二
.border-width-2 {border-style:dashed; border-color: black; animation:1s ease 0s alternate none infinite border-width-2;}
@keyframes border-width-2{
from{ border-width:0;}
to{ border-width:35px;}
}
1
范例三
.border-width-3 {border-style:double; border-color: black; animation:1s ease 0s alternate none infinite border-width-3;}
@keyframes border-width-3{
from{ border-width:0;}
to{ border-width:75px;}
}
1
box-shadow
box-shadow 属性向框添加一个或多个阴影
范例一
.box-shadow-1 { animation:1s ease 0s alternate none infinite box-shadow-1;}
@keyframes box-shadow-1{
from{ box-shadow:0 0 black;}
to{ box-shadow:0 150px 10px -50px rgba(0,0,0,.5);}
}
1
范例二
.box-shadow-2 { animation:1s ease 0s alternate none infinite box-shadow-2;}
@keyframes box-shadow-2{
from{ box-shadow:none;}
to{ box-shadow:inset -75px -75px 400px #000;}
}
1
范例三
.box-shadow-3 { box-radius: 1px; animation:1s ease 0s alternate none infinite box-shadow-3;}
@keyframes box-shadow-3{
from{ box-shadow:inset 0 0 75px 75px slategray, 0 0 0 slategray;}
to{ box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;}
}
1
color
CSS3 Color属性在传统的hex和RGB值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels
.color { animation:1s ease 0s alternate none infinite color;}
@keyframes color{
from{ color:white;}
to{ color:black;}
}
1
font-size
.font-size { animation:1s ease 0s alternate none infinite font-size;}
@keyframes font-size{
from{ font-size:60px;}
to{ font-size:300px;}
}
1
width
.width { animation:1s ease 0s alternate none infinite width;}
@keyframes width{
from{ width:150px;}
to{ width:330px;}
}
1
height
.height { animation:1s ease 0s alternate none infinite height;}
@keyframes height{
from{ height:150px;}
to{ height:0;}
}
1
letter-spacing
.letter-spacing { animation:1s ease 0s alternate none infinite letter-spacing;}
@keyframes letter-spacing{
from{ letter-spacing:0;}
to{ letter-spacing:100px;}
}
1
line-height
.line-height { animation:1s ease 0s alternate none infinite line-height;}
@keyframes line-height{
from{ line-height:10px;}
to{ line-height:300px;}
}
1
opacity
.opacity { animation:1s ease 0s alternate none infinite opacity;}
@keyframes opacity{
from{ opacity:1;}
to{ opacity:0;}
}
1
outline-width
.outline-width { outline-color:black; outline-style: solid; animation:1s ease 0s alternate none infinite outline-width;}
@keyframes outline-width{
from{ outline-width:0;}
to{ outline-width:100px;}
}
1
outline-offset
.outline-offset { outline-style: dashed; outline-color:slategray; animation:1s ease 0s alternate none infinite outline-offset;}
@keyframes outline-offset{
from{ outline-offset:-5px;}
to{ outline-offset:30px;}
}
1
outline-color
.outline-color { outline-width: 30px; outline-style: solid; animation:1s ease 0s alternate none infinite outline-color;}
@keyframes outline-color{
from{ outline-color:transparent;}
to{ outline-color:red;}
}
1
padding
.padding { animation:1s ease 0s alternate none infinite padding;}
@keyframes padding{
from{ padding:0;}
to{ padding:0 200px 0 50px;}
}
1
text-indent
.text-indent { animation:1s ease 0s alternate none infinite text-indent;}
@keyframes text-indent{
from{ text-indent:0;}
to{ text-indent:100px;}
}
1
text-shadow
范例一
.text-shadow-1 { animation:1s ease 0s alternate none infinite text-shadow-1;}
@keyframes text-shadow-1{
from{ text-shadow:0 0 black;}
to{ text-shadow:20px 20px 10px rgba(0,0,0,.5);}
}
1
范例二
.text-shadow-2 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-2;}
@keyframes text-shadow-2{
from{ text-shadow:0 0 0 white;}
to{ text-shadow:0 0 10px white;}
}
1
范例三
.text-shadow-3 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-3;}
@keyframes text-shadow-3{
from{ text-shadow:0 0 white;}
to{ text-shadow:0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;}
}
1
top
.top { position:relative; animation:1s ease 0s alternate none infinite top;}
@keyframes top{
from{ top:0;}
to{ top:100px;}
}
1
transform
范例一
.transform-1 { animation:1s ease 0s alternate none infinite transform-1;}
@keyframes transform-1{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
1
范例二
.transform-2 { animation:1s ease 0s alternate none infinite transform-2;}
@keyframes transform-2{
from{ transform:scale(1);}
to{ transform:scale(2);}
}
1
范例三
.transform-3 { animation:1s ease 0s alternate none infinite transform-3;}
@keyframes transform-3{
from{ transform:skew(0);}
to{ transform:skew(180deg);}
}
1
范例四
.transform-4 { animation:1s ease 0s alternate none infinite transform-4;}
@keyframes transform-4{
from{ transform:rotate(0) scale(1);}
to{ transform:rotate(360deg) scale(0);}
}
1
范例五
.transform-5 { animation:1s ease 0s alternate none infinite transform-5;}
@keyframes transform-5{
from{ transform:perspective(400px) rotateY(0);}
to{ transform:perspective(400px) rotateY(360deg);}
}
1
范例六
.transform-6 { animation:1s ease 0s alternate none infinite transform-6;}
@keyframes transform-6{
from{ transform:perspective(400px) rotateX(0);}
to{ transform:perspective(400px) rotateX(360deg);}
}
1
范例七
.transform-7 { animation:1s ease 0s alternate none infinite transform-7;}
@keyframes transform-7{
from{ transform:perspective(400px) rotateY(0);}
to{ transform:perspective(400px) translateZ(150px) rotateY(180deg);}
}
1
范例八
.transform-8 { animation:1s ease 0s alternate none infinite transform-8;}
@keyframes transform-8{
from{ transform:perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);}
to{ transform:perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);}
}
1
范例九
.transform-9 { animation:1s ease 0s alternate none infinite transform-9;}
@keyframes transform-9{
from{ transform:perspective(400px) rotate3d(.5,.5,0,0deg);}
to{ transform:perspective(400px) rotate3d(.5,.5,0,180deg);}
}
1
范例十
.transform-10 {transform-origin: 100% 50%; animation:1s ease 0s alternate none infinite transform-10;}
@keyframes transform-10{
from{ transform:perspective(400px) rotate3d(0,1,0,0deg);}
to{ transform:perspective(400px) rotate3d(0,1,0,-180deg);}
}
1
范例十一
.transform-origin {transform:rotate(45deg); animation:1s ease 0s alternate none infinite transform-origin;}
@keyframes transform-origin{
from{ transform-origin:50% 50%;}
to{ transform-origin:0 100%;}
}