css3----animation

animation-name属性 动画的名称   keyframename/none

-webkit-animation-name: circle_inner;   //名字自定义
　　　 animation-name: circle_inner;

 

animation-duration   持续时间

-webkit-animation-duration: 10s;
animation-duration: 10s;

 

animation-timing-function动画过渡类型

ease平滑过渡（默认）　　　　linear线性过渡　　　　ease-in由慢到快　　　　ease-out由快到慢　　　　ease-in-out由慢到快再到慢　　----->这五个常用　　

step-start等同于（1，start）　　　　step-end等同于（1，end）　　　　step(<integer>[,start[end]]?)　　　　cubic-bezier(<number>,<number>,<number>,<number>)

-webkit-animation-timing-function: linear;
animation-timing-function: linear;

 

animation-delay延迟时间   在动画之外

-webkit-animation-delay: 2s;
animation-delay: 2s;

 

animation-iteration-count   循环次数   infinite无限循环    　　或　　　　1、2、3····循环的次数

-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;

 

animation-direction运动的方向　　normal 正常方向  reverse 反方向运动   alternate先正常方向运动再反方向运动，并持续交替运行　　 alternate-reverse先正反方向运动再正方向运动，并持续交替运行

-webkit-animation-direction: alternate;
animation-direction: alternate;

alternate和alternate-reverse必须在循环（infinite）的条件下才能运行

 

animation-fill-mode动画不播放时的元素样式，也就是说动画播完和不播的时候的样子

none默认值，不设置动画之外的状态         forwards结束时的状态　　backwards开始时的状态　　both 结束或开始的状态

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

 

animation-play-state控制动画的开始和暂停状态 paused / running

-webkit-animation-play-state: paused;
animation-play-state: paused;

 

@keyframes控制每一个地方的关键位置    名字必填

@-webkit-keyframes circle_inner {
form { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}

 

will-change处理流畅方法  把要处理的动画放进去 

auto任何启发式和优化　　scroll-position改变元素的滚动位置　　contents改变元素的内容　　

<custom-ident>改变的属性和名称（transform）　　<animateable-feature>可动画的特征：left、top、margin　　例如：will-change：left

-webkit-will-change: transform;
-moz-will-change: transform;
will-change: transform;

 

额外补充  增加3D效果，让它有穿越物品的效果

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;