css基础-动画效果
CSS3新增的特性
常用厂商前缀：
"-webkit-"，Chrome、Safari、Android
"-moz-"，Firefox
"-o-"，Opera
"-ms-"，IE
1、过渡效果（transition）
（1）语法
transition:CSS属性 过渡时长 时间曲线 延迟时间
|-- CSS属性，如：width,color,...；对应单独过渡属性为：transition-property
|-- 过渡时长（秒）,即过渡过程要花费的时间，对应单独过渡属性为：transition-duration
|-- 时间曲线，对应单独过渡属性为：
transition-timing-function:[ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier(n,n,n,n)];
ease：慢->快->慢；
ease-in：慢速开始；
ease-out：慢速结束；
ease-in-out：慢速开始,慢速结束
linear：匀速；
cubic-bezier：贝塞尔曲线函数，n的范围是[0,1];
|-- 延迟时间（秒），对应单独过渡属性为：transition-delay
（2）例子
|-- 样式
/** 初始效果 */
#div1{
color:white;
background:black;
width:100px;
height:50px;
text-align: center;
margin: 0 auto;
/** 定义过渡效果 */
-webkit-transition: width 1s linear 0s,height 1s linear 0s,border-radius, 1s linear 0s;
-moz-transition: width 1s linear 0s,height 1s linear 0s,border-radius, 1s linear 0s;
-o-transition: width 1s linear 0s,height 1s linear 0s,border-radius, 1s linear 0s;
transition: width 1s linear 0s,height 1s linear 0s,border-radius, 1s linear 0s;
}
/** 过渡效果 */
#div1:hover{
width:200px;
height:200px;
line-height: 200px;
border-radius: 50%;
color:yellow;
background:green;
}
|-- HTML代码
<div id="div1"></div>
2、变形（transform）
（1）旋转
语法：transform:perspective(length) [rotate(angle)|rotateX(angle)|rotateY(angle)|rotateZ(angle)|rotate3d(x,y,z,angle)]
length，像素；
angle，指定角度，单位"deg"；
transform-origin，设置变换中心点位置，有如下取值:left|center|right|top|bottom|length|百分比
|-- perspective，指定透视效果，length设置元素当前位置z轴z=0的距离；
|-- rotate(angle)，2D旋转，默认顺时针，angle为负值时逆时针；可指定中心点：transform-origin:x-axis y-axis； 默认中心点[0,0]，即元素的左上角；
x-axis：left|center|right|length|百分比
y-axis：top|center|bottom|length|百分比
|-- rotateX(angle)，沿着X轴旋转；可指定X轴偏移位置：transform-origin:x-axis;
|-- rotateY(angle)，沿着Y轴旋转；可指定Y轴偏移位置：transform-origin:y-axis;
|-- rotateZ(angle)，沿着Z轴旋转；可指定Z轴偏移位置：transform-origin:z-axis，z-axis的值一般是length;
|-- rotate3d(x,y,z,angle)，3D旋转
x、y、z指定x轴、y轴、z轴的矢量值：0表示不旋转，1表示顺时针旋转，-1表示逆时针旋转；
可指定各轴的偏移位置：transform-origin:x-axis y-axis z-axis;z-axis；
例子：
|-- 样式
div{
display: inline-block;
text-align: center;
position: absolute;
top:150px;
left:100px;
padding: 100px;
}
#bg{
color:white;
background:gray;
border: solid 0 gray;
}
/** 初始形状（旋转前） */
#div1{
color:white;
background:black;
border: solid 0 black;
z-index: 9;
/** 以过渡效果方式达到目标形状 */
transition: transform 5s linear;
}
#div1:hover{
/** 目标形状：旋转后 */
-webkit-transform: perspective(100px) rotate3d(0,1,0,360deg);
-moz-transform: perspective(100px) rotate3d(0,1,0,360deg) ;
-o-transform: perspective(100px) rotate3d(0,1,0,360deg);
-ms-transform: perspective(100px) rotate3d(0,1,0,360deg);
transform: perspective(100px) rotate3d(0,1,0,360deg);
transform-origin:top right;
}
|-- HTML
<div id="div1">开</div>
<div id="bg">密</div>
（2）倾斜
语法：transform:[skewX(angle)|skewY(angle)|skew(x-angle,y-angle)]
angle，指定角度，单位"deg"；
transform-origin，设置变换中心点位置，有如下取值:left|center|right|top|bottom|length|百分比
|-- skewX(angle)，沿着X轴倾斜；可指定X轴偏移位置：transform-origin:x-axis;
|-- skewY(angle)，沿着Y轴倾斜；可指定Y轴偏移位置：transform-origin:y-axis;
|-- skew(x-angle,y-angle)，同时沿着X轴和Y轴倾斜;
例子：
|-- 样式
div{
display: inline-block;
text-align: center;
position: absolute;
top:150px;
left:100px;
padding: 100px;
}
#bg{
color:white;
background:gray;
border: solid 0 gray;
}
#div1{
color:white;
background:black;
border: solid 0 black;
z-index: 9;
/** 初始形状：不倾斜 */
-webkit-transform:skewY(0deg);
-moz-transform:skewY(0deg) ;
-o-transform:skewY(0deg);
-ms-transform:skewY(0deg);
transform:skewY(0deg);
transform-origin:left top;
transition: transform 5s linear;
}
/** 目标形状：倾斜 */
#div1:hover{
-webkit-transform:skewY(50deg);
-moz-transform:skewY(50deg) ;
-o-transform:skewY(50deg);
-ms-transform:skewY(50deg);
transform:skewY(50deg);
transform-origin:left top;
}
|-- HTML
<div id="div1">开</div>
<div id="bg">密</div>
（3）缩放
语法：transform:[scaleX(x)|scaleY(y)|scaleZ(z)|scale(x,y)|scale3d(x,y,z)]
x,y,z，代表x轴、y轴、z轴方向的缩放倍数，值为整数，1表示不缩放；
transform-origin，设置变换中心点位置，有如下取值:left|center|right|top|bottom|length|百分比
|-- scaleX(x)，沿着X轴缩放；
|-- scaleY(y)，沿着Y轴缩放；
|-- scaleZ(z)，3d缩放，z轴方向;
|-- scale(x,y)，2d缩放，即同时沿着X轴和Y轴缩放;
|-- scale3d(x,y,z)，3d缩放，以元素的中心点缩放;
例子：
|-- 样式
div{
display: inline-block;
text-align: center;
position: absolute;
top:150px;
left:100px;
padding: 100px;
}
#bg{
color:white;
background:gray;
border: solid 0 gray;
}
#div1{
color:white;
background:black;
border: solid 0 black;
z-index: 9;
/** 初始形状：不缩放 */
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1) ;
-o-transform:scale3d(1,1,1);
-ms-transform:scale3d(1,1,1);
transform:scale3d(1,1,1);
transform-origin:left top;
transition: transform 5s linear;
}
/** 目标形状：Y轴方向，由下而上缩放 */
#div1:hover{
-webkit-transform:scale3d(1,0.4,1);
-moz-transform:scale3d(1,0.4,1) ;
-o-transform:scale3d(1,0.4,1);
-ms-transform:scale3d(1,0.4,1);
transform:scale3d(1,0.4,1);
transform-origin:left top;
}
|-- HTML
<div id="div1">开</div>
<div id="bg">密</div>
（4）平移
语法：transform:[translateX(x)|translateY(y)|translateZ(z)|translate(x,y)|translate3d(x,y,z)]
x,y,z，代表x轴、y轴、z轴方向的平移距离；
transform-origin，设置变换中心点位置，有如下取值:left|center|right|top|bottom|length|百分比
|-- translateX(x)，沿着X轴平移；
|-- translateY(y)，沿着Y轴平移；
|-- translateZ(z)，2d平移，即同时沿着X轴和Y轴平移;
|-- translateZ(x,y)，2d平移，即同时沿着X轴和Y轴平移;
|-- translate3d(x,y,z)，3d平移，以元素的中心点平移;
例子：
|-- 样式
div{
display: inline-block;
text-align: center;
position: absolute;
top:150px;
left:100px;
padding: 100px;
}
#bg{
color:white;
background:gray;
border: solid 0 gray;
}
#div1{
color:white;
background:black;
border: solid 0 black;
z-index: 9;
/** 初始形状：不平移 */
-webkit-transform:translateX(0);
-moz-transform:translateX(0) ;
-o-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0);
transition: transform 5s linear;
}
/** 目标形状：X轴方向，向左平移 */
#div1:hover{
-webkit-transform:translateX(-130px);
-moz-transform:translateX(-130px) ;
-o-transform:translateX(-130px);
-ms-transform:translateX(-130px);
transform:translateX(-130px);
}
|-- HTML
<div id="div1">开</div>
<div id="bg">密</div>
3、动画（animation）
语法：
|-- @keyframes，定义动画
|-- from和to
@keyframes demo{
from{
//开始样式;
}
to{
//结束样式;
}
}
|-- 百分比
|-- animation(控制动画)
animation: name duration timing-function delay iteration-count direction fill-mode play-state
|-- name，指定要绑定到选择器的关键帧的名称，
对应单个属性：animation-name；
|-- duration，动画时长，单位：秒(s)或毫秒(ms)，
对应单个属性：animation-duration；
|-- timing-function，过渡类型，
可选值有：[linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(number, number, number, number)]；
对应单个属性：animation-timing-function；
|-- delay，延迟时间，
对应单个属性：animation-delay；
|-- iteration-count，播放次数，
可选值有：整数(指定播放次数)|infinite(无限循环)
对应单个属性：animation-iteration-count；
|-- direction，方向，
可选值有：[normal(正常播放,默认)|reverse(反向播放)|alternate(从正向开始进行往返播放)|alternate-reverse(从反向开始进行往返播放)]
对应单个属性：animation-direction；
|-- fill-mode，动画结束后要保持的状态
可选值有：none|forwards(保持最后一帧的状态)|backwards(回到第一帧的状态)|both
对应单个属性：animation-fill-mode；
|-- play-state，
可选值有：paused(暂停动画)|running(运行动画)
对应单个属性：animation-play-state；
（1）例子1，from和to
|-- 样式
#div1{
display: inline-block;
padding: 20px;
color:white;
background:black;
border: solid 0 black;
/** 加入动画，demo是下面通过@keyframes定义的动画的动画名称 */
animation: demo 5s linear 0s infinite alternate;
}
/** 定义动画 */
@keyframes demo{
from{
transform: translateX(0px);
background: black;
border-radius: 0%;
}
to{
transform: translateX(200px);
background: red;
border-radius: 50%;
}
}
|-- HTML
<div id="div1"></div>
（2）例子2，百分比
例子：
|-- 样式
#box{
position: absolute;
width:400px;
height: 400px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
border: 5px dotted gray;
}
#demo{
display: inline-block;
width:50px;
height:50px;
text-align: center;
line-height: 50px;
color:white;
background:black;
border: solid 0 black;
/** 加入动画，demo是下面通过@keyframes定义的动画的动画名称 */
animation: demo 8s linear 0s infinite alternate;
}
/** 定义动画 */
@keyframes demo{
0%{
transform: translate(0px,0px) rotate(0deg);
background: black;
color: white;
border-radius: 0%;
}
25%{
transform: translate(350px,0px) rotate(-90deg);
background:green;
color:red;
}
50%{
transform: translate(350px,350px) rotate(-180deg);
background:yellow;
color:darkgreen;
}
75%{
transform: translate(0px,350px) rotate(-270deg);
background:blue;
color:brown;
}
100%{
transform: translate(0px,0px) rotate(-360deg);
background:red;
color:white;
border-radius: 50%;
}
}
|-- HTML
<div id="box">
<div id="demo">景路</div>
</div>
