css3animation(css3animation动画)
CSS3的animation
animation: 属性是一个简写属性，用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;
对应上面的属性意思： 动画名称 动画执行时间 动画速度曲线 延迟时间 执行次数 执行方向
nternet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
animation-name: keyframename|none;动画名称
keyframename 自定义的名字
none 无动画效果
animation-duration: time;动画执行时间
time 秒或毫秒
animation-delay:time;动画效果延迟时间
time 秒或毫秒
animation-timing-function: value; 动画速度曲线
linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out :规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-iteration-count: n|infinite;动画执行次数
n 具体的次数
infinite 无限重复
animation-direction: normal|alternate;动画执行方向
normal 正常顺序(默认值)
alternate 动画轮流反向播放
animation-play-state: paused|running;动画执行状态
paused 暂停动画
running 运行动画
animation-fill-mode : none | forwards | backwards | both;动画执行过程效果是否可见
none 不改变(默认值)
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
css3中的transform、transition、translate、animation
transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top;
?rotate:? ? ? ? ?是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
? ? ? ? ? ? ? ? ? ? ?2D：rotate( angle )定义 2D 旋转，在参数中规定角度。
? ? ? ? ? ? ? ? ? ? ?3D：rotate3d( x , y , z , angle )定义 3D 旋转。
? ? ? ? ? ? ? ? ? ? ?事例：2D:transform: rotate(45deg);3D:ransform: rotate3d(0,0,0,45deg)
scale:? ? ? ? ? ?是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。
? ? ? ? ? ? ? ? ? ? 2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。
? ? ? ? ? ? ? ? ? ? 3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。
? ? ? ? ? ? ? ? ? ? 事例：2D:scale: scale(2,3);3D:ransform:?scale3d(0,0,1)
translate? ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。
? ? ? ? ? ? ? ? ? ? 2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。
? ? ? ? ? ? ? ? ? ?3D：translate3d( x , y , z )定义 3D 转化。
? ? ? ? ? ? ? ? ? ?事例：2D:transform: translate(50px,100px);3D:ransform: translate3d(50px,100px,50px)
skew：? ? ? ?是transform的值，定义倾斜，表示对当前元素的倾斜角度。
? ? ? ? ? ? ? ? ? ?skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
? ? ? ? ? ? ? ? ? ?事例：transform: skew(1deg,2deg)
transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等
? ? ? ? ? ? ? ? ? ? ? ? transition : transition-property ? transition-duration ? transition-timing-function ? transition-delay ;
? ? ? ? ? ? ? ? ? ? ? ? transition-property :规定应用过渡的 CSS 属性的名称。
? ? ? ? ? ? ? ? ? ? ? transition-duration :定义过渡效果花费的时间。默认是 0。
? ? ? ? ? ? ? ? ? ? ? transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。
? ? ? ? ? ? ? ? ? ? ? transition-delay :规定过渡效果延迟的时间。默认是 0。
? ? ? ? ? ? ? ? ? ? ? 事例：? transition :?width 2s ease-in-out? 1s
animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前? ? ? ? ? ? ? ? ? ? ? ? ? ? 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
? ? ? @keyframes fadeIn {
? ? ? ? ? ? ? ? ? ? 0% {opacity:0; }
? ? ? ? ? ? ? ? ? 100% {opacity:1;}
? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? 事例：animation:fadeIn?5s infinite;（fadeIn是帧动画的名称）infinite 无限循环
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes fadeout {
0% {opacity:1;}
100% {opacity:0;}
}
@keyframes pendulu?{
from {transform:rotate3d(0,0,1,0);}
5.5% {transform:rotate3d(0,0,1,-11deg);}
7% {transform:rotate3d(0,0,1,-12deg);}
16% {transform:rotate3d(0,0,1,9deg);}
17.5% {transform:rotate3d(0,0,1,10deg);}
26.5% {transform:rotate3d(0,0,1,-7deg);}
28% {transform:rotate3d(0,0,1,-8deg);}
36.5% {transform:rotate3d(0,0,1,5deg);}
38% {transform:rotate3d(0,0,1,6deg);}
46.5% {transform:rotate3d(0,0,1,-4deg);}
48% {transform:rotate3d(0,0,1,-5deg);}
57% {transform:rotate3d(0,0,1,3deg);}
58.5% {transform:rotate3d(0,0,1,4deg);}
66.5% {transform:rotate3d(0,0,1,-2deg);}
68% {transform:rotate3d(0,0,1,-3deg);}
75% {transform:rotate3d(0,0,1,1.5deg);}
76.5% {transform:rotate3d(0,0,1,2.5deg);}
82.5% {transform:rotate3d(0,0,1,-1deg);}
84% {transform:rotate3d(0,0,1,-2deg);}
90% {transform:rotate3d(0,0,1,1.5deg);}
95% {transform:rotate3d(0,0,1,-1deg);}
to {transform:rotate3d(0,0,1,0);}
}
@keyframes scale {
0% {transform:scale(0.9);}
100% {transform:scale(1);}
}
@keyframes cloud {
0% {transform:translateX(0);}
25% {transform:translateX(30%);}
50% {transform:translateX(60%);}
75% {transform:translateX(30%);}
100% {transform:translateX(0);}
}
@keyframes? fadeInDown
{
0%?{
? ? opacity:?0;
? ? filter:?alpha(opacity=0);
? ? -webkit-transform:?translate3d(0, -100%, 0);
? ? transform:?translate3d(0, -100%, 0);
}
100%?{
? ? opacity:?1;
? ? filter:?alpha(opacity=100);
? ? -webkit-transform:?none;
? ? /* transform:?none; */
}}
@-webkit-keyframes bounceIn {
0%,20%,40%,60%,80%,100% {
-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
transition-timing-function:cubic-bezier(.215,.61,.355,1)
}
0% {
opacity:0;
filter:alpha(opacity=0);
-webkit-transform:scale3d(2,2,2);
transform:scale3d(2,2,2)
}
40% {
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
}
60% {
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
}
80% {
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale3d(.97,.97,.97);
transform:scale3d(.97,.97,.97)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
.rotate2d {
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-name:rotate2d;
animation-name:rotate2d
}
.box-bottle {
position:absolute;
left:70%;
width:pr(99);
height:pr(97);
background:url("#{$imgPath}btn-bottle.png")no-repeat;
background-size:100%;
transform-origin:35% 68%;
opacity:0;
z-index:10;
div {
position:absolute;
width:pr(18);
height:pr(35);
transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg);
transition:opacity .5s linear 1.5s;
}
i {
position:absolute;
width:pr(18);
height:pr(35);
background-repeat:no-repeat;
background-size:100%;
transform-origin:3000% 50%;
opacity:0;
:nth-child(1) {
transition:transform 1s ease-out 1s,opacity .2s linear .9s;
background-image:url("#{$imgPath}water1.png");
}
:nth-child(2) {
transition:transform 1.1s ease-out .9s,opacity .2s linear .8s;
background-image:url("#{$imgPath}water2.png");
}
:nth-child(3) {
transition:transform 1.2s ease-out .8s,opacity .2s linear .7s;
background-image:url("#{$imgPath}water3.png");
}
:nth-child(4) {
transition:transform 1.3s ease-out .7s,opacity .2s linear .6s;
background-image:url("#{$imgPath}water4.png");
}
:nth-child(5) {
transition:transform 1.4s ease-out .6s,opacity .2s linear .5s;
background-image:url("#{$imgPath}water5.png");
}
:nth-child(6) {
transition:transform 1.5s ease-out .5s,opacity .2s linear .4s;
background-image:url("#{$imgPath}water6.png");
}
}
.active {
opacity:1;
animation:pour 2.5s both;
div {
opacity:0;
}
i {
opacity:1;
:nth-child(1) {
transform:rotate3d(0,0,1,-25deg);
}
:nth-child(2) {
transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0);
}
:nth-child(3) {
transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0);
}
:nth-child(4) {
transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0);
}
:nth-child(5) {
transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0);
}
:nth-child(6) {
transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0);
}
}
}
}
CSS3 动画
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；
transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：
none 表示不做变换； transform-function 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：
所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。
用法： rotate(angle) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：
它有三种用法： scale(number[, number]) 、 scaleX(number) 和 scaleY(number) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。
移动也分三种情况： translate(translation-value[, translation-value]) 、 translateX(translation-value) 和 translateY(translation-value) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等;
扭曲同样也有三种情况， skew(angle[, angle]) 、 skewX(angle) 和 skewY(angle) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。
矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix
transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：
它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：
它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；
它是来设置过渡效果的速率，它有6种形式的速率：
它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；
它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：
animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。
它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：
它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：
和 transition-timing-function 类似：
它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：
它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：
它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：
它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：
它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：
关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。
css3 animation 怎么用
首先，在css部分创建动画,使用@keyframes关键字创建动画如
style
#odiv{
width:200px;
height:200px;
position:absolute;
bakcground:#000;
/*接下来开始使用animation来连接动画*/
animation:abc 2s; -webkit-animation:abc 2s;
}//2s是动画时间可以自己设。
@keyframes abc{
from{
/*定义动画最初的状态*/
left:0px;
opacity:1;
}
to{
/*定义动画的结束状态*/
left:300px;
opacity:0;
}
} //abc 是动画名称
@-webkit-keyframes abc{
from{
left:0px;
opacity:1;
}
to{
left:300px;
opacity:0;
}
}//用webkit兼容谷歌和safari
/style
body
div id="odiv"/div
/body
以上是CSS动画简单的使用
具体可以参考 w3school
希望对你有帮助，有什么不明白的可以问我
css3动画使用
animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
关键帧 例如：
调用关键帧：
语法 animation:animation-name?animation-duration?animation-timing-function??animation-delay?animation-iteration-count animation-direction
animation-name 由?@keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放
练习如下：
该图形的变化从左上角到右上角来回跳动的一个过程
linear ?规定以相同速度开始至结束的过渡效果
ease ?规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out ?规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
?perspective:500px;透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 ?距离物体越近 物体就越大，距离物体越远 物体就越小
transform: rotateZ(30deg)?rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转?正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转?正值是向里面旋转?负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
?transform: translate3d(0, 0, 200px);效果如下:
?translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）
?translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
?要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat，?想变成3d效果要把值设置成preserve-3d
也可以?设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right
CSS3 Animation 控制元素在动画的初始位置开始动画
当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。
解决方法：
使用animation-fill-mode:forwards属性
forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置
backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置
上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。
js中赋值nimation-fill-mode:forwards的方法：
object .style.animationFillMode=none | forwards | backwards | both;
