transition transform animation用

1.transition

语法：

transition:width 3s ease 1s  

四个过渡属性含义：

transition-property  ： 过度属性的名称
transition-duration ：  过渡效果持续时间
transition-timing-function： 速度曲线（linear、 ease、 ease-in、 ease-out 、ease-in-out）
transition-delay： 过渡效果何时开始

举例：

div
{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
}
div:hover
{
  width:300px;
}

触发事件：当你的width(过度属性)发生变化的时候，执行动画效果

2.transform

语法：

transform: none|transform-functions;

属性：

transform:rotate(7deg); //旋转
transform:translate(x,y) //移动
transform:scale(x,y); //缩放
transform:skew(x-angle,y-angle); //倾斜

3.animation

语法：

animation:mymove 5s infinite;

六个动画属性含义：

animation-name:   keyframe 名称
animation-duration: 动画花费时间
animation-timing-function: 速度曲线
animation-delay:  延迟时间
animation-iteration-count: 播放的次数
animation-direction: 是否轮流反向播放动画

例子：

div
{
   width:100px;
   height:100px;
   background:red;
   position:relative;
   animation:mymove 5s infinite;
}

@keyframes mymove
{
   from {left:0px;}
   to {left:200px;}
}