CSS3的动画效果
第一章
1. CSS3 transition属性（过渡动画）
语法: transition:property duration timing-function delay;
property:指定CSS属性的name,transition效果
duration:需要指定多少秒或毫秒才能完成
time-function:指定transition效果的转速曲线
delay:定义transition效果开始的时候
time-function:
1.linear 规定以相同速度开始至结束的过渡效果
2.ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（慢-快-慢）
3.ease-in 规定以慢速开始的过渡效果
4.ease-out 规定以慢速结束的过渡效果
5.ease-in-out 规定以慢速开始和结束的过渡效果
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style type="text/css">
.div{
width:300px;
height:300px;
background-color:red;
}
.div:hover{
width:100px;
transition:width 2s linear 5s;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
注:如果有多个属性要同时改变，可以通过使用逗号进行隔开
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style type="text/css">
.div{
width:300px;
height:300px;
background-color:red;
}
.div:hover{
width:400px;
height:400px;
background-color:blue;
transition:width 3s linear 5s,height 3s linear 5s,background-color 3s linear 5s
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
或者
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style type="text/css">
.div{
width:300px;
height:300px;
background-color:red;
transition:width 3s linear 5s,height 3s linear 5s,background-color 3s linear 5s
}
.div:hover{
width:400px;
height:400px;
background-color:blue;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
2. 关键帧动画
关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，二关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果
关键帧动画的定义方式也比较特殊，它使用了一个关键字@keyframes来定义动画。具体格式:
@keyframes 动画名称{
时间点{元素状态}
时间点{元素状态}
…
}
语法:
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
name:指定要绑定到选择器的关键帧的名称
duration:动画指定需要多少秒或毫秒完成
time-function:设置动画将如何完成一个周期
(linear:动画从头到尾的速度是相同的
ease:默认。动画以低速开始，然后加快，在结束前变慢
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始和结束)
delay:设置动画在启动前的延迟间隔
iteration-count:定义动画的播放次数(n:一个数字，定义应该播放多少次动画；infinite:指定动画应该播放无限次（永远）)
direction:指定是否应该轮流反向播放动画
（normal:默认值，动画按正常播放
reverse:动画反向播放
alternate:动画在奇数次（1,3,5）正向播放，在偶数次（2,4,6）反向播放
alternate:动画在奇数次（1,3,5）反向播放，在偶数次（2,4,6）正向播放）
fill-mode:规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
play-state:指定动画是否正在运行或已暂停
initial:设置属性为其默认值
inherit:从父元素继承属性
例子如下:
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style type="text/css">
.div{
width:20px;
height:20px;
animation:demo 5s infinite;
}
@-webkit-keyframes demo{
0% {background:red;width:100px}
10% {background:green;width:120px}
40% {background:blue;width:140px}
70% {background:orange;width:160px}
100% {background:yellow;width:180px}
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
3. transform(变形)
在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
1.旋转rotate
transform:rotate(30deg)//正数顺时针旋转，负数逆时针旋转
2.移动translate
transform:translate(100px,20px)//当值为负数的时候，反方向移动物体
transform:translateX(100px)
transform:translateY(100px)
3.缩放scale
transform:scale(2,1.5)//X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数
4.扭曲skew
transform:skew(30deg,10deg)//第一个参数是水平方向扭曲角度（逆时针)，第二个参数是垂直方向扭曲角度（顺时针）
transform:skewX(30deg)
transform:skewY(10deg)
5.改变元素基点transform-origin
前面我们多次提到transform-origin这个东东，他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。下面我们主要来看看其使用规则：
transform-origin:X Y;用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变
注意:
CSS3动画效果属性最好前面都加上游览器的兼容
举个例子:
-moz-transform://火狐
-webkit-transform://谷歌/safari
-o-transform://opera
-ms-transform://IE
transform://W3C标准
投影
1.box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:水平阴影的位置。允许负值(左)，正值(右)
v-shadow:垂直阴影的位置。允许负值(上)，正值(下)
blur:模糊距离（只能为正值，如果其值为0，表示阴影不具有模糊效果，其值越大阴影的边缘越模糊）
spread:阴影尺寸（值可以为正负，如果正则整个阴影都延展扩大，反之值为负数，则缩小）
insert:默认为外部(outset),内部(inset)
例子：
div {
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px 50px 20px pink inset;
}
2.text-shadow
text-shadow:h-shadow v-shadow blur color
h-shadow:水平阴影的位置，允许负值
v-shadow:垂直阴影的位置，允许负值
blur:可选。模糊的距离
color:可选。阴影的颜色
3.text-overflow与word-wrap
出现省略标记
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
CSS3的旋转
X轴是往后是正，往前是负
Y轴是逆时针是正，顺顺时针是负
Z轴是顺时针是正，逆时针是负
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
- CSS3的动画效果@keyframes
- web前端css的复习（三十）css3动画--过渡效果
- 一款纯css3实现的机器人看书动画效果
- css3动画效果
- CSS3贝塞尔曲线$$动画效果
- 解决css3动画效果在360兼容模式跟猎豹浏览器下不兼容
- css3实现波纹式动画，点击聚焦时设置内阴影实现按钮点击立体效果
- CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示
- css3属性制作花瓣loading动画效果
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
- 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）
- css3动画实现伪弹幕效果
- css3动画效果和响应式
- CSS3 transition实现超酷动画效果
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- 纯CSS3制作骰子3D旋转动画效果
- CSS3实现动画效果教程详解
- 使用CSS3实现超炫的Loading（加载）动画效果
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效